html:not(.js) [data-k-handypanel] { visibility: visible !important; grid-template-rows: 1fr !important; }
html:not(.js) [data-k-aufklapper] { grid-template-rows: 1fr !important; opacity: 1 !important; transform: none !important; }
html:not(.js) [data-k-click="menueSchalten"] { display: none; }
html:not(.js) [data-ref="travRef"], html:not(.js) [data-ref="travMRef"] { display: none; }
html:not(.js) [data-k-mouseenter="unterAuf"]:hover [style*="visibility"], html:not(.js) [data-k-mouseenter="unterAuf"]:focus-within [style*="visibility"] { visibility: visible !important; }
dialog { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
dialog::backdrop { background: transparent; }
/* Im Entwurf sind Marktplan-Karte und Galerie-Fotos Knöpfe; als Links ausgeliefert dürfen sie nicht unterstrichen sein. */
a[data-k-click="planAuf"], a[data-k-bild-src] { text-decoration: none; }
/* Meldungen: weitere Bilder als Galerie unter dem Text, unter dem umflossenen Titelbild. */
.kr-galerie { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding-top: clamp(24px, 3vw, 40px); }
/* Kleine Handys unter 360 px (iPhone SE): vier Stellen, die bei 320 px eng wurden (Handy-Review 20.10.). Ab 360 px unverändert. */
@media (max-width: 359.98px) {
  /* Kopfzeile: „Rathausplatz Kiel“ stieß rechts an den Rand */
  .k-nur-istSchmal { letter-spacing: 0.05em !important; }
  .k-nur-istSchmal > span { gap: 8px !important; }
  /* Startseite, Kurzinfo: Bezeichnung über dem Wert, sonst „22. / Nov.“ */
  [style*="row-gap:0; align-items:baseline"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="row-gap:0; align-items:baseline"] > :nth-child(odd) { padding-bottom: 2px !important; }
  [style*="row-gap:0; align-items:baseline"] > :nth-child(even) { text-align: left !important; padding-top: 0 !important; }
  /* Wichtelflug: Wichtel an den rechten Rand statt auf „Kielian“ */
  [data-h~="flugbahn"] > img { left: auto !important; right: 0 !important; top: -30% !important; }
  /* Kalender: „19.11.“ und „1.12.“ passen in ihre Spalte */
  html [data-h~="kal-zahl"] { font-size: 15px !important; }
}
/* Handy: keine Wichtelbahn unter der Kopfzeile (Goldlinie, Punkte, wandernder Wichtel). Janno 20.10.: „soll mobile nicht sein“. Die senkrechte Bahn am Rechner bleibt. */
.k-nur-istHandy:has(> [data-ref="travMRef"]) { display: none !important; }
/* Handy-Kalender wie der Monatskalender der NivenoApp: keine Kästchen, Goldlinie zwischen den Wochen,
   Start und Ende als kleine blaue Pille (Janno 20.10.). html davor, weil handy.css später lädt und dieselben Elemente gleich stark setzt. */
@media (max-width: 899.98px) {
  html [data-h~="kalender"] { gap: 0 !important; }
  html [data-h~="kalender"] > [style*="min-height:68px"] { min-height: 0 !important; border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
  html [data-h~="kal-tag"] { border: 0 !important; background: transparent !important; border-radius: 0 !important; min-height: 0 !important; height: auto !important; padding: 12px 0 10px !important; gap: 6px !important; align-items: center !important; text-align: center; }
  html [data-h~="kal-tag"] > :first-child { align-items: center; }
  /* Start und Ende: kleine blaue Pille, Variante A (Janno 20.10.: Ring verworfen, A gewählt). Playfair hat über den Ziffern viel Luft,
     darum unten mehr Innenrand als oben; der negative Außenrand unten hält „Start“/„Ende“ auf Höhe der Nachbarn. */
  html [data-h~="kal-tag"][style*="background:var(--blau)"] > :first-child > span { display: inline-block; line-height: 1 !important; padding: 0 4px .44em; margin-bottom: -.44em; border-radius: 999px; background: var(--blau); color: var(--grund) !important; }
  html [data-h~="kal-tag"][style*="background:var(--blau)"] > span { color: var(--blau) !important; font-weight: 700 !important; }
  /* „bis 21“: ohne Kästchen auf Cremegrund dunkler, sonst nur 4,50 : 1 */
  html [data-h~="kal-tag"] > span[style*="62%"] { color: color-mix(in srgb, var(--text) 70%, var(--grund)) !important; }
}
/* Unter 360 px: Pille um „19.11.“ schmaler, damit sie in ihrer 40-px-Spalte bleibt (steht hinter dem Block oben, damit sie gewinnt) */
@media (max-width: 359.98px) {
  html [data-h~="kal-tag"][style*="background:var(--blau)"] > :first-child > span { padding-left: 3px; padding-right: 3px; }
}

/* Links in Impressum und Datenschutz (kiel_recht): Hover wie im Impressum, auch auf der Datenschutzseite. */
.k-hover-f045bb:hover, .k-hover-f045bb[data-k-spiegel-hover] { color:var(--text) !important; }

/* Startseite, drei Themenkacheln: bricht das Raster auf zwei Spalten um (Tablet), nimmt die dritte Kachel die volle Breite statt allein links zu stehen.
   Die Grenze rechnet das Raster selbst (3 × 240 px + 2 Lücken), deshalb an der Rasterbreite statt an der Fensterbreite. */
#teaser div[style*="auto-fit"] { container-type: inline-size; }
@container (min-width: 480px) and (max-width: calc(720px + 2 * clamp(16px, 2.4vw, 48px) - 0.02px)) {
  #teaser div[style*="auto-fit"] > :last-child:nth-child(3) { grid-column: 1 / -1; }
}

/* ===== Handy-Runde 2 (Janno 20.10. abends). Nur Darstellung, keine Vorlage und kein Panel-Feld geändert. ===== */
@media (max-width: 767.98px) {
  /* Kopfzeile: schmale helle Pille, Logo passt hinein, Burger senkrecht mittig. Keine gespiegelten Kopien mehr,
     die beim Zurückfedern am oberen Rand doppelt zu sehen waren. Das offene Menü ist dieselbe helle Pille. */
  :root { --k-logoH: 48px; --k-logoJ: flex-start; --k-logoL: 14px; --k-zeileH: 60px; --k-zeileA: center; --k-zeileP: 0 8px 0 0; --k-pilleTop: 44px; --k-panelOben: 0px; }
  html [data-kopf="basis"] { --grund: #FAF6EE; --blau: #26427A; --text: #1A2030; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 75%, transparent), 0 8px 24px color-mix(in srgb, #26427A 22%, transparent) !important; }
  [data-kopf="basis"] > :first-child { top: 5px !important; }
  /* Logo ohne den durchsichtigen Rand der Originaldatei (ein Drittel der Höhe), damit es in der schmalen Leiste lesbar bleibt */
  [data-kopf="basis"] [data-logo] img { filter: none !important; content: url("/assets/kiel/uploads/logo-10-jahre-kopf.webp"); height: 50px !important; }
  [data-kopf-ebene] { display: none !important; }
  /* Seitenköpfe der Unterseiten: der Abstand oben war für das große Logo gedacht (204 px), jetzt reicht Luft unter der schmalen Leiste */
  html body .kA-innen { padding-top: 112px !important; }
  /* Seitenkopf: Startpunkt der (am Handy ausgeblendeten) Wichtelbahn und Leuchtschatten unter dem Bild weg (Janno 20.10.: „gefällt mir überhaupt nicht“) */
  #kopf [data-faden-start], #kopf .kI-glut { display: none !important; }
  /* Wichtelflug: „15 Uhr“ brach in sich um, jetzt eine Zeile mit drei Zeiten */
  html .kI-zeitenhandy { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 14px !important; flex-wrap: nowrap !important; }
  html .kI-zeitenhandy > span { white-space: nowrap; font-size: clamp(24px, 7.6vw, 32px) !important; line-height: 1.1 !important; }
  /* Menü: Weihnachtsdorf ist selbst ein Link (kiel.js), die drei Unterseiten stehen immer darunter */
  [data-k-handypanel] [data-k-dorf-link] + button { display: none !important; }
  [data-k-handypanel] > div > div { padding-top: 0 !important; }
}

/* Live-Leiste am Handy: Ort immer rechts. Beim Scrollen tauscht links nur das Datum gegen den Status. */
.k-nur-istSchmal > span:first-child { right: 16px; justify-content: space-between; opacity: 1 !important; }
.k-nur-istSchmal > span:first-child > span:first-child { opacity: var(--k-datumO); transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.k-nur-istSchmal > span:first-child > span[aria-hidden="true"] { display: none !important; }
.k-nur-istSchmal [data-k-status="text"] { right: auto; white-space: nowrap; }
/* kiel.js setzt k-eng, wenn Status und Ort nicht nebeneinander passen; reicht das nicht, k-enger (Ort ohne Stadt) */
.k-nur-istSchmal.k-eng { letter-spacing: 0.04em !important; font-size: 11px !important; }
.k-nur-istSchmal.k-enger .k-ortstadt { display: none; }
.k-nur-istSchmal.k-enger { letter-spacing: 0.01em !important; }

/* Weitere Meldungen (News und Meldungsseiten): die Tablet-Regel „Foto so hoch wie die Karte“ blieb am Handy hängen,
   das Foto wurde riesig und schob Titel und Text aus der Karte. Am Handy ein flaches Foto wie die Marktplan-Kachel. */
@media (max-width: 540px) {
  .kr-kartenfoto { height: auto !important; aspect-ratio: 2 / 1 !important; }
}
@media (max-width: 767.98px) {
  /* Startseite, News: Fotos flach wie die Marktplan-Kachel, Ausschnitt aus der Bildmitte */
  #news a > div[style*="aspect-ratio:3/2"] { aspect-ratio: 2 / 1 !important; }
  #news a > div > img { object-position: 50% 50%; }
  /* Startseite, drei Themen: zwischen den Themen doppelt so viel Luft wie zwischen Bild und eigenem Titel */
  #teaser div[style*="auto-fit"] { row-gap: 72px !important; }
  #teaser div[style*="auto-fit"] > div > h3 { margin-top: 16px !important; }
  /* Impressionen: Pfeile weg, ein Tipp-Knopf oben rechts am Stapel (kiel.js); Tippen aufs Bild blättert wie bisher */
  #impressionen button[data-k-click="zurueck"], #impressionen button[data-k-click="weiter"] { display: none !important; }
  /* Zähler „1 von 10“ nur noch für Screenreader: die Nummer steht schon im Bild (Janno 21.10.) */
  #impressionen [aria-live], .k-flugzaehler { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0 !important; }
}
.k-tippen { position: absolute; z-index: 30; top: 18px; right: 22px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); background: #FAF6EE; color: #26427A; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 0 0 6px color-mix(in srgb, #FAF6EE 35%, transparent), 0 8px 20px color-mix(in srgb, #1A2030 40%, transparent); }
.k-tippen svg { width: 22px; height: 22px; display: block; }
@media (max-width: 767.98px) { .k-tippen { display: flex; } }

.k-flugnr { display: none; }
/* Wichtelflug, Bilder vom Flug: am Handy ein Stapel zum Durchtippen wie die Impressionen (kiel.js setzt data-k-flugstapel) */
@media (max-width: 767.98px) {
  [data-k-flugstapel] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; position: relative; margin: 12px 6px 0; }
  [data-k-flugstapel] > a { grid-area: 1 / 1; aspect-ratio: 3 / 2 !important; border: 6px solid #FAF6EE; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), 0 10px 24px color-mix(in srgb, #26427A 20%, transparent); transition: transform 0.3s ease; cursor: pointer !important; }
  [data-k-flugstapel] > a img { pointer-events: none; }
  /* wie die Impressionen: Verlauf unten und Nummer im Bild */
  [data-k-flugstapel] > a { position: relative; }
  [data-k-flugstapel] > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, color-mix(in srgb, #26427A 85%, transparent), transparent); pointer-events: none; }
  .k-flugnr { display: block; position: absolute; z-index: 1; left: 20px; bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold-hell); }
  .k-flugzaehler { margin: 18px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dunkel); }
}

.k-kalmonate { display: none; }
@media (min-width: 768px) { [data-k-dorf-link] { display: none !important; } }
/* Fußbereich am Handy, Variante C (Janno 21.10.): Zeiten, Adresse, Kontakt, Folgen in einer hellen Karte, Partner als Reihe */
@media (max-width: 767.98px) {
  .kr-fussinfo { background: #FAF6EE; color: #1A2030; border-radius: 24px; padding: 24px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .kr-fussinfo > div { margin: 0 !important; } .kr-fussinfo > div > div:first-child { color: #83652A !important; }
  .kr-fussinfo a, .kr-fussinfo a span { color: #26427A !important; text-decoration-color: #C9A866 !important; }
  .kr-fussinfo :is(a[aria-label], a[href*="facebook"], a[href*="instagram"]) { border-color: #26427A !important; color: #26427A !important; }
  .kr-fussinfo :focus-visible { outline-color: #26427A !important; }
  footer > div:last-child > div > div:has(> a > img) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  footer > div:last-child > div > div:has(> a > img) > a { min-height: 56px !important; height: 56px !important; padding: 8px !important; }
  footer > div:last-child > div > div:has(> a > img) img { max-height: 36px !important; width: auto !important; max-width: 100% !important; }
}

/* Kalender: gleich hohe Ziffern (die alten Ziffern der Playfair hängen bei der 9 nach unten und ließen die Pille schief wirken),
   Pille ohne negativen Rand, Luft bis „Start“/„Ende“, Monatszeile darüber (kiel.js aus der Saison). */
@media (max-width: 899.98px) {
  html [data-h~="kalender"] [data-h~="kal-tag"] { gap: 12px !important; }
  html [data-h~="kalender"] [data-h~="kal-tag"] > :first-child > span { font-variant-numeric: lining-nums; }
  html [data-h~="kal-tag"][style*="background:var(--blau)"] > :first-child > span { padding: 4px 6px 5px !important; margin: -4px 0 -5px !important; }
  .k-kalmonate { display: block; grid-column: 1 / -1; font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--blau); padding-bottom: 14px; }
}

/* ===== Handy-Runde 4 (Janno 21.10.): Wichtelflug-Kopf mit Flugbahn (A), Angebotslisten als Wischreihen (A), Gut zu wissen (B) ===== */
.k-bahn, .k-punkte, .k-zahl { display: none; }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767.98px) {
  /* Wichtelflug-Kopf: Flugbahn wie auf der Öffnungszeiten-Seite statt Zeitenzeile und Bullauge (kiel.js baut sie aus den Flugzeiten) */
  #kopf:has(.k-bahn) .kI-zeitenhandy, #kopf:has(.k-bahn) .kA-rechts { display: none !important; }
  .k-bahn { display: block; position: relative; height: 176px; margin: 52px 0 6px; }
  .k-bahn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .k-bahn-halt { position: absolute; translate: -50% -10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .k-bahn-halt i { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #26427A, 0 0 0 6px var(--gold-hell); }
  .k-bahn-halt b { font: 800 26px 'Playfair Display', Georgia, serif; line-height: 1; color: #FAF6EE; white-space: nowrap; font-variant-numeric: lining-nums; }
  .k-bahn-wichtel { position: absolute; left: 54%; top: -24%; width: 58px; rotate: -14deg; pointer-events: none; }

  /* Angebot und Hütten: je Kategorie eine Wischreihe weißer Karten, Anzahl am Titel, Punkte zeigen die Lage */
  #angebot h3, #huetten-liste h3 { display: flex; align-items: center; gap: 10px; font-size: 26px !important; margin: 0 0 14px !important; }
  .k-zahl { display: inline-block; font: 700 13px Archivo, sans-serif; color: #83652A; border: 1px solid var(--gold); border-radius: 999px; padding: 2px 9px; line-height: 1.4; }
  #angebot [id] + [id] { margin-top: 44px !important; }
  html body :is(#angebot, #huetten-liste) [data-h~="zwei"] { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px !important; padding: 2px 20px 6px !important; scroll-padding-left: 20px; }
  html body :is(#angebot, #huetten-liste) [data-h~="zwei"]::-webkit-scrollbar { display: none; }
  html body :is(#angebot, #huetten-liste) [data-h~="zwei"] > [data-k-kachel] { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); padding-bottom: 16px; }
  html body :is(#angebot, #huetten-liste) [data-h~="zwei"] > [data-k-kachel] > div:first-child { aspect-ratio: 4 / 3 !important; border-radius: 0 !important; }
  html body :is(#angebot, #huetten-liste) [data-h~="zwei"] > [data-k-kachel] > :is(h3, h4) { margin: 14px 16px 6px !important; font-size: 19px !important; }
  html body :is(#angebot, #huetten-liste) [data-h~="zwei"] > [data-k-kachel] > p { margin: 0 16px !important; font-size: 15px !important; line-height: 1.45 !important; }
  .k-punkte { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .k-punkte i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 45%, transparent); transition: width .2s; }
  .k-punkte i.an { width: 18px; border-radius: 3px; background: var(--gold-dunkel); }

  /* Gut zu wissen: Tasse als flache Fotokarte, darunter Bezahlen und Sitzen nebeneinander als Wertblöcke mit Goldlinie
     (Kartenstil der Seite: gerahmte Karten nur bei Wegweisern, Janno 16.10.), dazu ein Symbol je Block */
  .kr-g8-bild { aspect-ratio: 2 / 1 !important; height: auto !important; }
  .kr-g8-rest { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; margin-top: 24px; }
  .kr-g8-rest article { border-top: 2px solid var(--gold) !important; padding-top: 16px !important; margin: 0 !important; }
  .kr-g8-rest article::before { content: ''; display: block; width: 26px; height: 26px; margin-bottom: 10px; background: var(--gold-hell); -webkit-mask: var(--k-sym) center / contain no-repeat; mask: var(--k-sym) center / contain no-repeat; }
  .kr-g8-rest article:nth-child(1) { --k-sym: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%207h20M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zM6%2015h4'%2F%3E%3C%2Fsvg%3E"); }
  .kr-g8-rest article:nth-child(2) { --k-sym: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%209V6a2%202%200%200%200-2-2H7a2%202%200%200%200-2%202v3M3%2016a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-5a2%202%200%200%200-4%200v1.5a.5.5%200%200%201-.5.5h-9a.5.5%200%200%201-.5-.5V11a2%202%200%200%200-4%200zM5%2018v2M19%2018v2'%2F%3E%3C%2Fsvg%3E"); }
  .kr-g8-rest .kr-g5-wert { font-size: 21px !important; margin-bottom: 8px !important; }
  .kr-g8-rest .km-text { font-size: 14px !important; line-height: 1.5 !important; }
}

/* Ladezeit (22.10.): Titelbühne bekommt ihre Höhe schon per CSS, gleiche Formel wie kiel.js (Kopfhöhe, Abstand #info, 5 % Vorschau).
   Sonst startet sie mit 360px und der mittig gesetzte Text springt, sobald kiel.js lädt (CLS Rechner 0,12, Handy 0,095).
   Nach dem Laden gilt der JS-Wert (--k-buehneH, misst innerHeight wie bisher), CSS ist nur der Startwert. */
html #buehne { min-height: var(--k-buehneH, max(360px, calc(100svh - var(--k-infoH) - max(24px, min(clamp(32px, 5vw, 64px) - 12px, 5svh))))) !important; }