/* =========================
   FONT FACE
========================= */
  @font-face {
	font-family: "Typewriter";
	src: url("_Schrift/OldTypewriterEF-Light1 Kopie.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
  }
  
  
  /* =========================
	 BASE
  ========================= */
  
  * { box-sizing: border-box; }
  
  :root{
	--type-size: 1.7rem;
	--type-line: 1;
	--type-weight: 500;
	--footer-pad: calc(12px + 1em + env(safe-area-inset-bottom, 0px));

  
	--col-year: 9ch;
	--gap: 1.2ch;
  }
  
  body {
	margin: 0;
	background: #ffffff;
	color: #000;
	font-family: "itc-american-typewriter", serif;
	font-weight: 500;
	font-style: normal;
	line-height: var(--type-line);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-bottom: var(--footer-pad);
  }
  
  .container { padding: 0.8vh; }
  
  /* =========================
	 SENTENCE + PANEL TYPE (identisch)
  ========================= */
  
  .sentence,
  #panel-text,
  #panel-text *{
	font-size: var(--type-size);
	line-height: var(--type-line);
	font-weight: var(--type-weight);
  }
  
  .sentence {
	margin: 0;
	max-width: 100vw;
  }
  
  /* =========================
	 LINKS
  ========================= */
  
  .inline-link {
	color: #000000;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
	cursor: pointer;
  }
  
  .inline-link:hover { color: #7676f3; }

  /* Active state (mobile + when panel open) */
  .inline-link.active {
	color: #7676f3;
  }
  
  /* =========================
	 PANEL
  ========================= */
  
  .panel {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: height 420ms ease, opacity 220ms ease;
	color: #7676f3;
  }
  
  .panel.open { opacity: 1; }
  
  #panel-text {
	padding-top: 0.1em;
	max-width: 100vw;
	word-break: break-word;
	padding-bottom: calc(0.5em + env(safe-area-inset-bottom, 0px));

  }
  
  /* =========================
	 BOOK ENTRY SYSTEM
	 year | text
  ========================= */
  
  #panel-text .entry{
	display: grid;
	grid-template-columns: var(--col-year) 1fr;
	column-gap: var(--gap);
	align-items: baseline;
  }
  
  #panel-text .year{
	white-space: nowrap;
	opacity: 0.6;
  }
  
  #panel-text .tag{
	opacity: 0.8; /* Selected/Winner opacity stays */
	white-space: nowrap;
  }
  
  #panel-text .desc{
	min-width: 0;
  }
  
  /* Key/Value rows (no year indent) */
  #panel-text .entry--kv{
	grid-template-columns: max-content 1fr;
  }
  
  @media (max-width: 900px) {
	/* recognition: 2 columns (year | text) */
	#panel-text .entry--rec{
	  grid-template-columns: 6ch 1fr;
	  column-gap: 0.8ch;
	}
  
	/* tag bleibt “ruhig” und klebt nicht komisch */
	#panel-text .entry--rec .tag{
	  opacity: 0.8;
	  white-space: nowrap;
	  margin-right: 0.8ch; /* kleiner Abstand zum Text */
	}
  
	#panel-text .entry--rec .desc{
	  min-width: 0;
	}
  }
  .plain-link {
	color: inherit;
	text-decoration: none;
  }
  
  .plain-link:hover {
	color: inherit;
	text-decoration: none;
  }
  
  /* =========================
	 FOOTER
  ========================= */
  
  .footer-left,
  .footer-right {
	position: fixed;
	bottom: 12px;
	font-size: var(--type-size);
	line-height: var(--type-line);
  }
  
  .footer-left { left: 12px; }
  .footer-right { right: 12px; }