/* EM Webstil Forever-Übersetzung, Prototyp 05.11.2026. Nur lokale Stilprobe. */
/* Schriften lokal (vorher Google Fonts), latin und latin-ext, SIL Open Font License */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cinzel-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cinzel-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cinzel-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cinzel-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-normal-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-normal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IM Fell English SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/im-fell-english-sc-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-serif-4-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-serif-4-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-serif-4-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-serif-4-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nacht-900: #0a1523;
  --nacht-800: #02162d;
  --tief-700: #0b3151;
  --ultra-600: #08456e;
  --karte-500: #1f5679;
  --wolke-400: #517c86;
  --perg-300: #f1d5a5;
  --perg-400: #e4c08c;
  --perg-600: #b48c58;
  --gold-100: #fcefc1;
  --gold-300: #d2be8b;
  --gold-500: #b8a160;
  --messing: #b07820;
  --tinte: #2a1f14;
  --tinte-2: #4a3a26;
  --amber: #f2a43a;
}

* { box-sizing: border-box; }
html { background: var(--nacht-900); }
body {
  margin: 0; color: #e8dcc0;
  font: 400 18px/1.6 'Source Serif 4', Georgia, serif;
  background: var(--nacht-900);
}
a { color: inherit; }

/* Prototyp-Hinweis */
.probe { background: #3a2a10; color: var(--gold-100); text-align: center; font: 600 13px/1 'Source Serif 4', serif;
  letter-spacing: .06em; padding: 8px 12px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 10px 40px;
  background: linear-gradient(180deg, rgba(2,22,45,.97), rgba(2,22,45,.88));
  border-bottom: 1px solid rgba(210,190,139,.35); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.nav img { height: 54px; }
.nav .links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav .links a { text-decoration: none; font: 400 14px/1 'Cinzel', serif; letter-spacing: .14em; color: var(--gold-300); }
.nav .links a:hover { color: var(--gold-100); }

/* Titel (Runde 5): ruhige helle Negativschrift in der Titelschrift, ohne Verlauf und ohne Schatten, wie auf der Site */
.gold {
  font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.15; color: #f0e5cb;
}
/* Knöpfe */
.knopf { display: inline-block; padding: 14px 28px; text-decoration: none; font: 600 15px/1 'Cinzel', serif; letter-spacing: .12em;
  text-transform: uppercase; border-radius: 3px; transition: transform .18s, box-shadow .18s; }
.knopf.haupt { color: #1a1208; background: linear-gradient(180deg, #f6e3a8, #d2a85a 55%, #a87a2c);
  border: 1px solid #6b4a18; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(0,0,0,.45); }
.knopf.neben { color: var(--gold-100); background: rgba(2,22,45,.6); border: 1px solid var(--gold-500);
  box-shadow: inset 0 0 0 3px rgba(2,22,45,.6), inset 0 0 0 4px rgba(184,161,96,.45); }
.knopf:hover { transform: translateY(-2px); }
.nav .links a.knopf { padding: 11px 18px; font-size: 13px; color: #1a1208; }

/* Bühne (Hero) */
.buehne { position: relative; overflow: hidden; background: var(--nacht-800) center top / cover no-repeat;
  aspect-ratio: 1914 / 822; min-height: 620px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.buehne::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 60% at 50% 34%, rgba(2,22,45,.55), transparent 70%),
              linear-gradient(180deg, transparent 70%, rgba(10,21,35,.9)); }
.buehne > * { position: relative; z-index: 1; }
.buehne .emblem { width: clamp(220px, 21vw, 340px); margin-top: 1.2vw; filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.buehne h1 { margin: -.4vw 0 0; font-size: clamp(30px, 3.6vw, 60px); line-height: 1.05; }

/* Banderole (Runde 5): gemaltes Papier statt geometrischem Band, die Schrift liegt als HTML darauf */
.banderole { position: relative; display: inline-block; margin: 14px auto 0; max-width: 92%;
  border-style: solid; border-color: transparent; border-image: url(img/papier_etikett_warm_1.webp) 16% 7% 16% 7% fill / .7em 1.6em stretch;
  padding: .1em .5em 0; font: italic 600 clamp(17px, 1.45vw, 24px)/1.25 'Cormorant Garamond', serif; color: var(--tinte);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transform: rotate(-1deg); text-wrap: balance; }
.banderole.zwei { border-image-source: url(img/papier_etikett_warm_2.webp); border-image-slice: 18% 8% 18% 8% fill; border-image-width: .9em 1.6em; padding: .35em .7em .25em; transform: rotate(.6deg); }
.kartenkopf .banderole.zwei { margin-left: 0; }
/* Leiste mit Rauten */
.leiste { margin-top: 18px; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
  font: 400 clamp(13px, 1vw, 16px)/1 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-100);
  text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.leiste a { text-decoration: none; }
.leiste .raute { width: 7px; height: 7px; background: var(--gold-300); transform: rotate(45deg); box-shadow: 0 0 6px rgba(242,164,58,.6); }
.buehne .knoepfe { margin-top: 22px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Trennlinie */
.trenner { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 0 auto 12px; width: min(520px, 80%); }
.trenner::before, .trenner::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-300)); }
.trenner::after { background: linear-gradient(90deg, var(--gold-300), transparent); }
.trenner i { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--gold-300);
  background: radial-gradient(circle, #5fa3d9, #0b3151 70%); box-shadow: 0 0 8px rgba(95,163,217,.6); }

/* Abschnitte */
.abschnitt { position: relative; padding: 84px 40px 96px; }
.abschnitt.karte { background: linear-gradient(180deg, rgba(10,21,35,.92), rgba(10,21,35,.55) 25%, rgba(10,21,35,.55) 75%, rgba(10,21,35,.95)),
  url(img/map_bg.webp) center / cover; }
.abschnitt h2 { text-align: center; margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 42px); }
.abschnitt .unterzeile { text-align: center; margin: 0 auto 48px; max-width: 720px; color: #d6c8a6;
  font: italic 500 22px/1.4 'Cormorant Garamond', serif; }

/* Pergamentkarten */
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1240px; margin: 0 auto; }
.pkarte { position: relative; color: var(--tinte); padding: 18px 10px 16px;
  border: 40px solid transparent; border-image: url(img/card_frame.webp) 215 fill / 40px stretch;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); margin-top: 44px; }
.pkarte .medaillon { position: absolute; top: -104px; left: 50%; transform: translateX(-50%); width: 128px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pkarte .schritt { display: block; text-align: center; font: 400 14px/1 'IM Fell English SC', serif; letter-spacing: .2em; color: var(--tinte-2); margin-top: 6px; }
.pkarte h3 { margin: 8px 0 12px; text-align: center; font: 700 22px/1.2 'Cinzel', serif; letter-spacing: .05em; color: #3a2610; text-transform: uppercase; }
.pkarte p { margin: 0 0 18px; font-size: 17px; line-height: 1.55; text-align: center; }
.pkarte .beispiel { margin-top: 6px; padding: 12px 14px; border-radius: 3px; background: rgba(2,22,45,.88);
  color: var(--gold-100); border: 1px solid #6b4a18; box-shadow: inset 0 0 0 2px rgba(184,161,96,.35); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips span { padding: 6px 10px; border: 1px solid rgba(210,190,139,.6); border-radius: 2px; font: 400 13px/1 'Cinzel', serif; letter-spacing: .1em; }
.chips span.an { background: linear-gradient(180deg, #2d6a3f, #1f4a2c); border-color: #7fbf7a; }
.zeitstrahl { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 700 15px/1 'Cinzel', serif; }
.zeitstrahl b { flex: 1; height: 0; border-top: 2px dashed var(--gold-300); }
.zeitstrahl span { padding: 7px 9px; border-radius: 50%; border: 1px solid var(--gold-300); background: #10233a; }
.inhalt { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.inhalt li::before { content: '\25C6'; color: var(--gold-300); font-size: 10px; margin-right: 8px; vertical-align: 2px; }

/* Städte */
.staedte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; max-width: 1240px; margin: 0 auto; }
.stadt { position: relative; display: block; text-decoration: none; border-radius: 4px; overflow: hidden; min-height: 300px;
  background: var(--tief-700) center / cover; border: 1px solid #6b4a18;
  box-shadow: inset 0 0 0 3px rgba(2,22,45,.8), inset 0 0 0 4px rgba(210,190,139,.55), 0 14px 26px rgba(0,0,0,.5); transition: transform .2s; }
.stadt:hover { transform: translateY(-4px); }
.stadt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,22,45,.1) 30%, rgba(2,22,45,.92)); }
.stadt .text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px; text-align: center; }
.stadt h3 { margin: 0 0 6px; font-size: 26px; }
.stadt .epochen { font: 400 13px/1.3 'Cinzel', serif; letter-spacing: .14em; color: var(--gold-300); }
.stadt .marke { position: absolute; top: 14px; right: 14px; z-index: 1; font: 600 11px/1 'Cinzel', serif; letter-spacing: .14em;
  color: #1a1208; background: linear-gradient(180deg, #f6e3a8, #c8994a); padding: 6px 9px; border-radius: 2px; }

/* Zitatband */
.band { text-align: center; padding: 70px 40px; background: radial-gradient(ellipse at center, #0f2b4a, var(--nacht-900) 70%); }
.band p { margin: 0 auto; max-width: 1100px; font: italic 500 30px/1.35 'Cormorant Garamond', serif; color: var(--gold-100); }
.band small { display: block; margin-top: 14px; font: 400 13px/1 'Cinzel', serif; letter-spacing: .2em; color: var(--gold-300); }

/* Fakten */
.fakten { display: flex; gap: 0; max-width: 1000px; margin: 0 auto; border: 1px solid #6b4a18;
  box-shadow: inset 0 0 0 3px rgba(2,22,45,.9), inset 0 0 0 4px rgba(210,190,139,.5); background: rgba(2,22,45,.75); }
.fakten div { flex: 1; text-align: center; padding: 26px 12px; border-right: 1px solid rgba(210,190,139,.25); }
.fakten div:last-child { border-right: 0; }
.fakten strong { display: block; font: 700 26px/1.1 'Cinzel', serif; color: var(--gold-100); margin-bottom: 8px; }
.fakten span { font-size: 15px; color: #cdbf9c; }

/* Fuss */
.fuss { padding: 40px; text-align: center; font-size: 14px; color: #9fa9b4; border-top: 1px solid rgba(210,190,139,.25); background: #070f19; }
.fuss .ki { display: block; margin-top: 8px; font-size: 13px; color: #7f8a96; }

/* Stadtseite */
.stadtkopf { position: relative; aspect-ratio: 1914 / 822; min-height: 520px; background: center / cover no-repeat; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
.stadtkopf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,21,35,.92)); }
.stadtkopf .inhalt-kopf { position: relative; z-index: 1; padding-bottom: 40px; }
.stadtkopf h1 { margin: 0; font-size: clamp(34px, 4vw, 66px); }
.epochenreihe .pkarte h3 { font-size: 30px; }
.epochenreihe .pkarte .epoche { display: block; text-align: center; font: italic 600 20px/1.2 'Cormorant Garamond', serif; color: var(--tinte-2); margin-bottom: 10px; }
.tasche { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; max-width: 1180px; margin: 0 auto; }
.tasche img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 0% 100%; border-radius: 4px; border: 1px solid #6b4a18; box-shadow: inset 0 0 0 4px rgba(210,190,139,.5), 0 18px 30px rgba(0,0,0,.55); }
.tasche h2 { text-align: left; }
.tasche ul { list-style: none; padding: 0; margin: 18px 0 0; }
.tasche li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(210,190,139,.2); }
.tasche li b { font: 600 15px/1 'Cinzel', serif; letter-spacing: .1em; color: var(--gold-100); min-width: 140px; }
.buchung { max-width: 760px; margin: 0 auto; text-align: center; }

@media (max-width: 980px) {
  .karten, .staedte { grid-template-columns: 1fr; max-width: 460px; }
  .karten { gap: 80px; }
  .tasche { grid-template-columns: 1fr; }
  .nav .links a:not(.knopf) { display: none; }
  .fakten { flex-direction: column; }
  .buehne { aspect-ratio: auto; min-height: 640px; background-size: cover; }
}

/* ---- Ausbau 05.11.2026: Originallogos, Städte, Übersicht ---- */
.nav .marke img { height: 46px; width: auto; }
.buehne .emblem { width: auto; height: clamp(230px, 24vw, 360px); margin-top: .6vw; }
.buehne h1 { margin-top: .2vw; }
.trenner.links { margin-left: 0; justify-content: flex-start; }
.trenner.links::before { display: none; }
h2.links, h1.links { text-align: left; }
.knopf.klein { padding: 10px 16px; font-size: 13px; }

.staedte { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; max-width: 1320px; }
.staedte.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stadt { min-height: 360px; background-position: center 75%; }
.stadt.klein { min-height: 220px; }
.stadt .stadtlogo { position: absolute; z-index: 1; left: 50%; top: 18px; transform: translateX(-50%); height: 58%; width: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); transition: transform .25s; }
.stadt:hover .stadtlogo { transform: translateX(-50%) scale(1.04); }

/* Übersichtsseite */
.kartenkopf { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: 50px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 60px 40px 40px; }
.kartenkopf h1 { font-size: clamp(32px, 3.6vw, 56px); margin: 0 0 10px; }
.kartenkopf .banderole { margin: 4px 0 18px 26px; }
.kartenkopf p { font-size: 19px; color: #ddd0b0; max-width: 560px; }
.landkarte { position: relative; border: 1px solid #6b4a18; box-shadow: inset 0 0 0 4px rgba(210,190,139,.5), 0 20px 40px rgba(0,0,0,.6); border-radius: 4px; overflow: hidden; }
.landkarte img { display: block; width: 100%; }
.marke-ort { position: absolute; transform: translate(-50%, -50%); text-decoration: none; width: 9%; aspect-ratio: 1; border-radius: 50%; }
.marke-ort span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap;
  font: 700 14px/1 'Cinzel', serif; letter-spacing: .08em; color: #1a1208; padding: 5px 9px; border-radius: 2px;
  background: linear-gradient(180deg, #fbe9c6, var(--perg-400)); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.marke-ort:hover span { background: linear-gradient(180deg, #f6e3a8, #d2a85a); }
.zeile { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; max-width: 1180px; margin: 0 auto 56px;
  padding: 28px 32px; background: rgba(2,22,45,.72); border: 1px solid #6b4a18; box-shadow: inset 0 0 0 3px rgba(2,22,45,.9), inset 0 0 0 4px rgba(210,190,139,.45), 0 16px 30px rgba(0,0,0,.45); }
.zeile-logo img { width: 100%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.zeile h3 { margin: 0; font-size: 34px; text-align: left; }
.zeile .land { margin: 4px 0 6px; font: 400 14px/1.3 'Cinzel', serif; letter-spacing: .12em; color: var(--gold-300); }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 20px; }
.mini { margin: 0; background: #0b1726; border: 1px solid rgba(210,190,139,.45); }
.mini img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mini figcaption { padding: 7px 10px; font-size: 14px; color: #cdbf9c; }
.mini figcaption b { font: 700 15px/1 'Cinzel', serif; color: var(--gold-100); margin-right: 8px; }

/* Stadtseite */
.intro-raster { display: grid; grid-template-columns: 260px 1fr; gap: 50px; align-items: center; max-width: 1080px; margin: 0 auto; }
.intro-logo { width: 100%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); }
.intro-stadt h2 { font-size: clamp(24px, 2.2vw, 34px); }
.intro-stadt p { font-size: 19px; }
.intro-stadt .land { font: 400 14px/1.4 'Cinzel', serif; letter-spacing: .12em; color: var(--gold-300); }
.pkarte.epoche { margin-top: 0; padding-top: 10px; }
.pkarte .epochenbild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 12px; border: 1px solid #6b4a18;
  box-shadow: 0 6px 14px rgba(60,40,10,.35); }
.pkarte .epoche-name { display: block; text-align: center; font: italic 600 20px/1.2 'Cormorant Garamond', serif; color: var(--tinte-2); margin-bottom: 8px; }
.epochenreihe .pkarte h3 { font-size: 30px; margin-bottom: 2px; }
.fuss-staedte { margin-bottom: 10px; font: 400 13px/1 'Cinzel', serif; letter-spacing: .14em; }
.fuss-staedte a { color: var(--gold-300); text-decoration: none; }

@media (max-width: 1100px) {
  .staedte { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
  .staedte.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartenkopf, .zeile, .intro-raster { grid-template-columns: 1fr; }
  .zeile-logo, .intro-logo { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .staedte, .staedte.vier { grid-template-columns: 1fr; }
  .minis { grid-template-columns: 1fr; }
  .abschnitt { padding: 60px 18px 70px; }
  .nav { padding: 8px 14px; }
}
.buehne .emblem { height: clamp(250px, 27vw, 400px); margin-top: .4vw; }
.kopf-emblem { display: block; width: min(300px, 70%); margin: 0 0 18px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); }

/* ==== EM-Seite 06.11.2026: Bausteine der vollständigen Seite ==== */
html { scroll-behavior: smooth; }
section[id], article[id] { scroll-margin-top: 90px; }
.em-einzeiler { padding: 46px 40px; }
.em-einzeiler p { font-size: clamp(22px, 2vw, 30px); }

.pergament-blatt { max-width: 820px; margin: 0 auto; color: var(--tinte); padding: 34px 40px 30px;
  border: 40px solid transparent; border-image: url(img/card_frame.webp) 215 fill / 40px stretch;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); font-size: 19px; line-height: 1.7; }
.pergament-blatt p:first-child::first-letter { float: left; font: 700 64px/0.9 'Cinzel', serif; color: #6b4a18; margin: 6px 10px 0 0; }
.pergament-blatt .hervorhebung { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(107,74,24,.35);
  font: italic 600 21px/1.4 'Cormorant Garamond', serif; text-align: center; color: #4a3a26; }

.tasche-buehne { max-width: 1000px; margin: 0 auto 40px; }
.tasche-buehne img { width: 100%; border-radius: 4px; border: 1px solid #6b4a18;
  box-shadow: inset 0 0 0 4px rgba(210,190,139,.5), 0 18px 30px rgba(0,0,0,.55); aspect-ratio: 1300 / 462; object-fit: cover; }
.ausruestung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1240px; margin: 0 auto; }
.teil, .bildkarte { margin: 0; background: rgba(2,22,45,.8); border: 1px solid #6b4a18;
  box-shadow: inset 0 0 0 3px rgba(2,22,45,.9), inset 0 0 0 4px rgba(210,190,139,.45), 0 14px 26px rgba(0,0,0,.45); }
.teil img, .bildkarte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.teil figcaption, .bildkarte figcaption { padding: 16px 18px 20px; }
.teil h3, .bildkarte h3 { margin: 0 0 6px; font: 700 18px/1.2 'Cinzel', serif; color: var(--gold-100); letter-spacing: .04em; }
.teil p, .bildkarte p { margin: 0; font-size: 16px; color: #d6c8a6; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 1080px; margin: 0 auto; }

.zweispaltig { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; max-width: 1180px; margin: 0 auto; }
.zweispaltig p { font-size: 19px; }
.gerahmt { width: 100%; border-radius: 4px; border: 1px solid #6b4a18; box-shadow: inset 0 0 0 4px rgba(210,190,139,.5), 0 18px 30px rgba(0,0,0,.55); }

.epochen-fries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; max-width: 1240px; margin: 0 auto; }
.epochen-tafel { margin: 0; padding: 12px; background: linear-gradient(180deg, #f3dfb4, var(--perg-400)); border: 1px solid #6b4a18;
  box-shadow: 0 14px 26px rgba(0,0,0,.5); }
.epochen-tafel img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid rgba(60,40,10,.5); }
.epochen-tafel figcaption { padding: 12px 6px 4px; text-align: center; color: var(--tinte); }
.epochen-tafel b { display: block; font: 700 20px/1.2 'Cinzel', serif; }
.epochen-tafel span { font: italic 500 18px/1.3 'Cormorant Garamond', serif; color: var(--tinte-2); }

.em-staedte .kartenkopf { padding-top: 10px; }
.marke-ort.bald { width: auto; aspect-ratio: auto; pointer-events: none; }
.marke-ort.bald span { position: static; transform: none; display: inline-block; opacity: .8; font-size: 12px; margin-top: 34px; }
.stadtblock { max-width: 1180px; margin: 0 auto 60px; background: rgba(2,22,45,.82); border: 1px solid #6b4a18;
  box-shadow: inset 0 0 0 3px rgba(2,22,45,.9), inset 0 0 0 4px rgba(210,190,139,.45), 0 18px 34px rgba(0,0,0,.5); overflow: hidden; }
.stadtband { height: clamp(160px, 22vw, 300px); background: center 60% / cover no-repeat; border-bottom: 1px solid #6b4a18; }
.stadtinhalt { display: grid; grid-template-columns: 210px 1fr; gap: 34px; padding: 0 34px 30px; }
.stadtlogo-gross { width: 100%; margin-top: -90px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.stadttext { padding-top: 22px; }
.stadttext h3 { margin: 0; font-size: 36px; text-align: left; }
.stadttext .land { margin: 4px 0 14px; font: 400 14px/1.3 'Cinzel', serif; letter-spacing: .12em; color: var(--gold-300); }
.legende { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; }
.legende p { margin: 0; font-size: 17px; line-height: 1.65; color: #e3d7b8; }
.beweis { width: 100%; border: 1px solid #6b4a18; box-shadow: inset 0 0 0 3px rgba(210,190,139,.4); }
.bald-karte { max-width: 1180px; margin: 0 auto; min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: center 55% / cover no-repeat; border: 1px solid #6b4a18; position: relative; filter: saturate(.75); }
.bald-karte::before { content: ''; position: absolute; inset: 0; background: rgba(2,22,45,.72); }
.bald-karte div { position: relative; padding: 24px; }
.bald-karte h3 { margin: 0 0 6px; font-size: 30px; }
.bald-karte p { margin: 0; color: #d6c8a6; }

.fakten.fuenf div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fakten.fuenf img { height: 70px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.fakten.fuenf strong { font-size: 19px; margin: 4px 0 0; }
.fakten .stufe { height: 70px; display: flex; align-items: center; font: 700 34px/1 'Cinzel', serif; color: var(--gold-100); }
.fakten.fuenf { max-width: 1180px; }

.buchkarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.buchkarte { text-align: center; padding: 22px 16px 20px; background: rgba(2,22,45,.8); border: 1px solid #6b4a18;
  box-shadow: inset 0 0 0 3px rgba(2,22,45,.9), inset 0 0 0 4px rgba(210,190,139,.45); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.buchkarte img { height: 150px; width: auto; }
.buchkarte h3 { margin: 4px 0 0; font-size: 24px; }
.buchkarte p { margin: 0 0 6px; color: #d6c8a6; font-size: 16px; min-height: 2.6em; }
.buchkarte small { color: #8f97a3; font-size: 12px; }
.knopf.gesperrt { opacity: .55; cursor: default; }
.knopf.gesperrt:hover { transform: none; }

.fragenliste { max-width: 860px; margin: 0 auto; }
.fragenliste details { margin-bottom: 12px; background: rgba(2,22,45,.82); border: 1px solid #6b4a18; box-shadow: inset 0 0 0 3px rgba(2,22,45,.9), inset 0 0 0 4px rgba(210,190,139,.35); }
.fragenliste summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; position: relative; font: 600 19px/1.35 'Cormorant Garamond', serif; color: var(--gold-100); }
.fragenliste summary::-webkit-details-marker { display: none; }
.fragenliste summary::after { content: '\25C6'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--gold-300); font-size: 12px; transition: transform .2s; }
.fragenliste details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragenliste details p { margin: 0; padding: 0 22px 20px; color: #e3d7b8; font-size: 17px; }

@media (max-width: 1100px) {
  .ausruestung, .buchkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zweispaltig, .paar, .epochen-fries, .stadtinhalt, .legende { grid-template-columns: 1fr; }
  .stadtlogo-gross { max-width: 180px; margin: -80px auto 0; }
  .fakten.fuenf { flex-direction: column; }
}
@media (max-width: 600px) {
  .ausruestung, .buchkarten { grid-template-columns: 1fr; }
  .pergament-blatt { padding: 14px 6px; border-width: 26px; border-image-width: 26px; font-size: 17px; }
  .stadtinhalt { padding: 0 16px 22px; }
}
@media (max-width: 600px) {
  .pkarte { border-width: 30px; border-image-width: 30px; padding: 14px 4px 12px; }
  .pkarte h3 { font-size: 18px; hyphens: auto; overflow-wrap: anywhere; }
  .karten { gap: 90px; }
}

/* Rechtliches in der Fusszeile (Einbau auf outdoorescaperoom.ch) */
.fuss .recht { display: block; margin-top: 12px; font-size: 13px; }
.fuss .recht a { color: var(--gold-300); text-decoration: none; }
.fuss .recht a:hover { text-decoration: underline; }

/* Seitenverhältnis plus Mindesthöhe rechnet der Browser in eine
   Mindestbreite um: Unter 1444 px Fensterbreite wurde die Bühne breiter als
   der Bildschirm, der Inhalt rutschte nach rechts. Die Obergrenze verhindert
   das; die Bühne wird dort nur etwas höher als im Bildverhältnis. */
.buehne, .stadtkopf { max-width: 100%; }

/* ==== Runde 5 (09.11.2026): Erklärsatz im Kopf statt leerem Streifen ==== */
/* Die Bühne wächst mit dem Inhalt (Seitenverhältnis nur noch als Mindesthöhe), damit der Satz nie abgeschnitten wird. */
.buehne { aspect-ratio: auto; min-height: max(620px, 43vw); padding: 0 20px 34px; }
.buehne .erklaerung { margin: 14px auto 0; max-width: 760px; font: 400 clamp(18px, 1.35vw, 22px)/1.45 'Source Serif 4', serif; color: #f0e5cb;
  text-wrap: balance; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 14px rgba(2,22,45,.9); }
.buehne .leiste { margin-top: 16px; }
@media (max-width: 980px) { .buehne { min-height: 640px; } }
@media (max-width: 600px) {
  .buehne .emblem { height: 220px; }
  .buehne .erklaerung { font-size: 17px; }
  .kartenkopf .banderole { margin-left: 0; }
}
/* Runde 5: Das Medaillon der ersten Karte überdeckte am Handy den zweizeiligen Titel. */
.em-ablauf h2 { margin-bottom: 64px; }