/* Weihnachtsshooting-Buchung
   Gleiche Schriften, Farben und Bausteine wie die Weihnachtsseite (Cassis-Nachbau).
   Übernommen aus weihnachten-seite/buchen/index.html, damit der Übergang von der
   Hauptseite in die Buchung nicht auffällt. Ergänzungen für die Anwendung stehen
   am Ende unter "Nur in der Anwendung".
*/
/* Buchungsseite: gleiche Schriften und Farben wie die Preisliste (Cassis-Stil), Fließlayout
     wie die Detailseiten der Preisliste. Die Terminlogik ist hier noch eine Attrappe:
     Tage und Zeiten stehen fest im Skript unten, nichts wird gespeichert. */
  :root{
    --ink:#3D3733; --paper:#FFFFFF; --stone:#F7F5F3; --rule:rgba(61,55,51,.18);
    --serif:'Cormorant Garamond','Cormorant',Garamond,'Times New Roman',serif;
    --sans:'Work Sans','Helvetica Neue',Arial,sans-serif;
  }
  html{ background:var(--paper); }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
  h1,h2,h3,p{ margin:0; font-weight:400; }
  a{ color:inherit; text-decoration:none; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  .hero{ position:relative; min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:90px 24px; overflow:hidden; background:var(--paper); }
  .hero .bg{ position:absolute; inset:0; opacity:.24; }
  .hero .bg img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; }
  .hero > *:not(.bg){ position:relative; }
  img[data-bild]{ transform:scale(var(--zoom,1)); transform-origin:var(--origin,50% 50%); }
  .brand{ font-family:var(--serif); font-weight:300; font-size:30px; line-height:30px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:70px; }
  .eyebrow{ font-family:var(--serif); font-style:italic; font-size:38px; line-height:41.8px; }
  .title{ font-family:var(--serif); font-weight:300; font-size:110px; line-height:110px; text-transform:uppercase; text-wrap:balance; }
  .sub{ font-family:var(--sans); font-size:16px; line-height:24px; letter-spacing:2.4px; text-transform:uppercase; margin-top:22px; }
  .hero .back{ position:absolute; }
  .back{ left:32px; top:34px; font-family:var(--sans); font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:3px; }

  .switch{ background:var(--stone); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:2; }
  .switch .wrap{ display:flex; justify-content:center; gap:34px; padding-block:18px; flex-wrap:wrap; }
  .switch a{ font-family:var(--sans); font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; padding-bottom:4px; border-bottom:1px solid transparent; }
  .switch a.on{ border-bottom-color:var(--ink); }
  .switch a.full{ opacity:.4; }
  .wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }
  section.pkg{ padding:110px 0 100px; }
  section.pkg.stone{ background:var(--stone); }

  .head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:56px; }
  .head h2{ font-family:var(--serif); font-weight:300; font-size:80px; line-height:80px; letter-spacing:4px; text-transform:uppercase; text-wrap:balance; }
  .head .lab{ font-family:var(--sans); font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; }
  .head p{ font-family:var(--sans); font-size:16px; line-height:24px; max-width:620px; }
  .head .sub2{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:26px; margin-top:8px; }

  /* Zeitfenster */
  .slots{ max-width:760px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
  .slot{ appearance:none; border:1px solid var(--rule); background:var(--paper); color:var(--ink); cursor:pointer; padding:18px 10px; text-align:center; display:flex; flex-direction:column; gap:6px; transition:border-color .2s ease, background .2s ease, color .2s ease; }
  .slot b{ font-weight:300; font-family:var(--serif); font-size:30px; line-height:30px; }
  .slot span{ font-family:var(--sans); font-size:11px; line-height:16px; letter-spacing:1.65px; text-transform:uppercase; }
  .slot:hover{ border-color:var(--ink); }
  .slot.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .slot.taken{ cursor:default; opacity:.38; }
  .slot.taken:hover{ border-color:var(--rule); }
  .slot.taken b{ text-decoration:line-through; }
  .legend{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:34px; font-family:var(--sans); font-size:11px; line-height:19.8px; letter-spacing:1.65px; text-transform:uppercase; }
  .legend i{ display:inline-block; width:12px; height:12px; border:1px solid var(--rule); vertical-align:-1px; margin-right:8px; background:var(--paper); }
  .legend i.on{ background:var(--ink); border-color:var(--ink); }
  .legend i.taken{ opacity:.38; }

  /* Formular */
  .form{ max-width:620px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:30px 28px; }
  .form .full{ grid-column:1 / -1; }
  .field{ display:flex; flex-direction:column; gap:10px; }
  .field label{ font-family:var(--sans); font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; }
  .field input, .field select, .field textarea{ appearance:none; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:24px; padding:8px 0; width:100%; box-sizing:border-box; }
  .field textarea{ min-height:96px; resize:vertical; }
  .field select{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%233D3733' stroke-width='1.2'/></svg>"); background-repeat:no-repeat; background-position:right 2px center; padding-right:26px; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-width:2px; }
  .field.check{ flex-direction:row; gap:14px; align-items:flex-start; font-family:var(--sans); font-size:16px; line-height:24px; }
  .field.check input[type=checkbox]{ appearance:auto; -webkit-appearance:checkbox; border:0; padding:0; width:18px; height:18px; margin:3px 0 0; accent-color:#3D3733; flex:none; }

  .summary{ max-width:620px; margin:0 auto 46px; background:var(--paper); padding:34px 40px; text-align:center; display:flex; flex-direction:column; gap:10px; }
  .summary .lab{ font-family:var(--sans); font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; }
  .summary .when{ font-family:var(--serif); font-weight:300; font-size:44px; line-height:48px; }
  .summary .where{ font-family:var(--sans); font-size:16px; line-height:24px; }
  .summary .price{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:26px; margin-top:6px; }
  .summary.empty .when{ font-size:30px; line-height:36px; font-style:italic; }

  .btn{ width:260px; height:46px; border:0; cursor:pointer; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:11px; line-height:19.8px; letter-spacing:1.65px; text-transform:uppercase; margin:10px auto 0; }
  .btn[disabled]{ opacity:.35; cursor:default; }
  .note{ text-align:center; font-family:var(--sans); font-size:16px; line-height:24px; max-width:520px; margin:28px auto 0; }
  .note.hint{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:26px; }
  .fine{ text-align:center; font-family:var(--sans); font-size:13px; line-height:20px; max-width:520px; margin:22px auto 0; opacity:.75; }

  .cta{ background:var(--paper); text-align:center; padding:90px 24px 110px; display:flex; flex-direction:column; align-items:center; gap:22px; }
  .cta .lab{ font-family:var(--sans); font-size:15px; line-height:22.5px; letter-spacing:2.25px; text-transform:uppercase; }
  .cta h2{ font-family:var(--serif); font-weight:300; font-size:80px; line-height:80px; letter-spacing:4px; text-transform:uppercase; }
  .cta p{ font-family:var(--sans); font-size:16px; line-height:24px; max-width:530px; }
  .cta a.btn{ width:220px; }

  html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; will-change:opacity,transform; }
  html.js .rv.in{ opacity:1; transform:none; }
  html.js .rv.d1{ transition-delay:.12s } html.js .rv.d2{ transition-delay:.24s }
  @media (prefers-reduced-motion: reduce){ html.js .rv{ opacity:1; transform:none; transition:none; } .slot{ transition:none; } }

  @media (max-width: 759px){
    .hero{ min-height:420px; padding:84px 28px; }
    .brand{ font-size:18px; line-height:22px; margin-bottom:40px; }
    .eyebrow{ font-size:26px; line-height:30px; }
    .title{ font-size:52px; line-height:54px; }
    .sub{ font-size:12px; line-height:18px; letter-spacing:1.8px; }
    .back{ left:28px; top:22px; }
    .wrap{ padding:0 28px; }
    .switch .wrap{ gap:12px 18px; padding-block:14px; }
    .switch a{ font-size:12px; letter-spacing:1.5px; }
    section.pkg{ padding:60px 0 56px; }
    .head{ margin-bottom:36px; }
    .head h2{ font-size:40px; line-height:44px; letter-spacing:2px; }
    .slots{ grid-template-columns:repeat(3, 1fr); gap:10px; }
    .slot{ padding:14px 6px; }
    .slot b{ font-size:24px; line-height:26px; }
    .slot span{ font-size:10px; letter-spacing:1.2px; }
    .form{ grid-template-columns:1fr; gap:26px; }
    .summary{ padding:28px 24px; }
    .summary .when{ font-size:34px; line-height:38px; }
    .btn{ width:100%; }
    .cta{ padding:70px 28px; }
    .cta h2{ font-size:40px; line-height:44px; letter-spacing:2px; }
  }

/* ─────────── Nur in der Anwendung ─────────── */

/* Wichtig: Eigene display-Regeln (etwa display:grid an .slots und .person-zeile) übersteuern
   das hidden-Attribut aus dem Browser-Standard. Ohne diese Zeile stehen alle Tage und alle
   Personenzeilen gleichzeitig auf der Seite. */
[hidden]{ display:none !important; }

/* Bildausschnitt und Vergrößerung aus dem Bearbeiten-Modus, gleiche Regel wie auf der Hauptseite. */
img[data-bild]{ transform:scale(var(--zoom,1)); transform-origin:var(--origin,50% 50%); }

/* Hinweis- und Fehlerbänder über dem Inhalt */
.band{ max-width:760px; margin:0 auto 34px; padding:18px 22px; box-sizing:border-box; font-family:var(--sans); font-size:16px; line-height:24px; }
.band.warn{ background:#F6E9E5; color:#7A2E1C; }
.band.ok{ background:#E8F1E9; color:#2F5E38; }
.band a{ text-decoration:underline; }

/* Tagesleiste als echte Knöpfe statt Verweise.
   Der gewählte Tag steht deutlich hervor: dunkler Grund, helle Schrift, etwas größer.
   Auf einer Leiste mit zehn Tagen reicht ein feiner Unterstrich nicht aus. */
.switch button{ font:inherit; background:transparent; border:0; cursor:pointer; color:inherit; font-family:var(--sans); font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; padding:8px 14px; border:1px solid transparent; transition:background .15s ease, color .15s ease; }
.switch button:hover{ background:var(--paper); border-color:var(--rule); }
.switch button.on,
.switch button.on:hover{ background:var(--ink); color:#fff; border-color:var(--ink); font-size:15px; letter-spacing:2.1px; padding-block:10px; }
.switch button.on .frei{ opacity:.85; }
.switch button.voll{ opacity:.4; }
.switch button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.switch .frei{ display:block; font-size:10px; letter-spacing:1.2px; opacity:.7; margin-top:2px; }

/* Personenzeile jetzt dreispaltig: Vorname, Erwachsen oder Kind, Alter */
.person-zeile{ grid-template-columns:1fr 150px 110px; }
@media (max-width:759px){ .person-zeile{ grid-template-columns:1fr 1fr; } .person-zeile [data-alter-feld]{ grid-column:1 / -1; } }

/* Knopf mit WhatsApp-Zeichen */
.btn-wa{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:auto; padding:0 26px; }
.btn-wa .wa{ width:18px; height:18px; fill:currentColor; flex:none; }

/* Dynamische Personenzeilen */
.personen{ grid-column:1 / -1; display:flex; flex-direction:column; gap:14px; }
.person-zeile{ display:grid; grid-template-columns:1fr 120px; gap:14px; align-items:end; }
.person-zeile .nr{ font-family:var(--sans); font-size:11px; letter-spacing:1.65px; text-transform:uppercase; opacity:.6; }
@media (max-width:759px){ .person-zeile{ grid-template-columns:1fr 92px; } }

/* Auswahlgruppen für die beiden Einwilligungen */
.wahl{ display:flex; flex-wrap:wrap; gap:10px; }
.wahl label{ font-family:var(--sans); font-size:14px; line-height:20px; letter-spacing:0; text-transform:none; border:1px solid var(--rule); padding:10px 16px; cursor:pointer; }
.wahl input{ position:absolute; opacity:0; width:0; height:0; }
.wahl input:checked + span{ font-weight:500; }
.wahl label:has(input:checked){ border-color:var(--ink); background:var(--ink); color:#fff; }
.wahl label:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:3px; }

/* Ausgebucht: WhatsApp-Knopf und Warteliste nebeneinander */
.ausgebucht-optionen{ max-width:620px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.ausgebucht-optionen .btn-wa{ margin-top:6px; }
.warteliste-form{ background:var(--stone); padding:22px 24px 26px; display:flex; flex-direction:column; gap:14px; text-align:left; }
.warteliste-form .lab{ font-family:var(--sans); font-size:13px; letter-spacing:1.3px; text-transform:uppercase; opacity:.75; margin:0; }
.warteliste-form .btn{ width:100%; margin-top:4px; }
@media (max-width:759px){
  .ausgebucht-optionen{ grid-template-columns:1fr; text-align:center; }
  .ausgebucht-optionen .btn-wa{ margin:0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Übersicht, Kalender und Laufzettel.
   Zuerst fürs Handy gebaut, größere Bildschirme bekommen nur mehr Platz.
   Gleiche Schriften und Farben wie die Kundenseite, nur dichter gesetzt.
   ═══════════════════════════════════════════════════════════════════════════ */

.admin, .kopfleiste, .liste{ font-family:var(--sans); color:var(--ink); }
.admin{ max-width:820px; margin:0 auto; padding:24px 16px 72px; }
.admin-titel{ font-family:var(--serif); font-weight:300; font-size:32px; margin:0 0 6px; }
.admin .werkzeuge{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.admin form.inline{ display:inline; }
.admin .btn{ width:auto; padding:0 18px; margin:0; }
.admin .btn.sec{ background:transparent; color:var(--ink); border:1px solid var(--ink); }

.jahres-reiter{ display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--rule); }
.jahres-reiter a{ font-family:var(--sans); font-size:13px; letter-spacing:1.2px; text-transform:uppercase; color:inherit; text-decoration:none; padding:10px 4px 12px; border-bottom:2px solid transparent; opacity:.55; }
.jahres-reiter a.an{ opacity:1; border-color:var(--ink); font-weight:500; }

/* ─── Kopfleiste der Übersicht ─── */
/* Die Kopfzeile scrollt bewusst mit weg. Fest bleibt nur die schmale Filterleiste, sonst
   verliert man auf dem Handy die halbe Bildschirmhöhe an Kopfzeile. */
.kopfleiste{ background:var(--paper); }
.kopfleiste-innen{ max-width:820px; margin:0 auto; padding:14px 16px 4px; }
.chips-huelle{ position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 1px 0 rgba(61,55,51,.04); }
.chips-innen{ max-width:820px; margin:0 auto; padding:9px 16px 10px; }
.marke-zeile{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.marke-zeile > span{ font-size:10px; letter-spacing:1.6px; text-transform:uppercase; opacity:.6; white-space:nowrap; }
.menue{ display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; }
.menue::-webkit-scrollbar{ display:none; }
.menue a, .menue button{ font:inherit; font-size:12px; color:inherit; background:none; border:0; padding:4px 0; cursor:pointer; text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent; }
.menue a:hover, .menue button:hover{ border-bottom-color:var(--ink); }
.kopfleiste h1{ font-family:var(--serif); font-weight:300; font-size:30px; margin:6px 0 12px; }

.kacheln{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.kacheln::-webkit-scrollbar{ display:none; }
.kacheln div{ flex:none; background:var(--stone); padding:8px 12px; min-width:84px; }
.kacheln b{ display:block; font-family:var(--serif); font-weight:400; font-size:20px; line-height:24px; }
.kacheln span{ font-size:9px; letter-spacing:1.3px; text-transform:uppercase; opacity:.65; white-space:nowrap; }
.kacheln .warn{ background:#F6E9E5; color:#7A2E1C; }

.belegung{ height:3px; background:var(--stone); margin:12px 0 5px; }
.belegung span{ display:block; height:100%; background:var(--ink); }
.belegung-text{ margin:0 0 12px; font-size:11px; letter-spacing:.4px; opacity:.6; }

.chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:8px 12px; border:1px solid var(--rule); text-decoration:none; color:inherit; white-space:nowrap; }
.chip span{ font-size:10px; opacity:.55; }
.chip.an{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.an span{ opacity:.8; }

.suche{ position:relative; margin-top:8px; }
.suche input{ width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:10px 34px 10px 12px; border:1px solid var(--rule); background:var(--paper); border-radius:0; color:inherit; }
.suche input:focus{ outline:2px solid var(--ink); outline-offset:-1px; }
.suche .loeschen{ position:absolute; right:10px; top:50%; transform:translateY(-50%); text-decoration:none; opacity:.5; font-size:14px; }

/* ─── Liste der Buchungen ─── */
.liste{ max-width:820px; margin:0 auto; padding:14px 16px 80px; }
.leer{ font-size:14px; opacity:.7; }

.karte{ border:1px solid var(--rule); margin-bottom:10px; background:var(--paper); }
.karte.nacharbeit{ border-left:3px solid #C8721F; }
.karte.fertig{ border-left:3px solid #4E7A57; }
.karte.storniert{ opacity:.55; }

.karte > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:13px 14px; }
.karte > summary::-webkit-details-marker{ display:none; }
.karte > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.karte .zeit{ flex:none; text-align:center; min-width:52px; }
.karte .zeit b{ display:block; font-family:var(--serif); font-weight:400; font-size:21px; line-height:22px; }
.karte .zeit span{ font-size:10px; letter-spacing:.8px; opacity:.6; }
.karte .wer{ flex:1; min-width:0; }
.karte .name{ margin:0; font-size:16px; line-height:20px; }
.karte .unter{ margin:2px 0 0; font-size:11px; opacity:.65; }
.karte .punkt{ display:inline-block; margin-left:6px; padding:1px 7px; background:var(--stone); font-size:10px; letter-spacing:.6px; opacity:1; }
.karte .punkt.orange{ background:#C8721F; color:#fff; }

.fortschritt{ display:flex; align-items:center; gap:3px; margin-top:7px; }
.fortschritt i{ width:13px; height:3px; background:var(--rule); }
.fortschritt i.voll{ background:var(--ink); }
.fortschritt span{ margin-left:5px; font-size:10px; opacity:.55; }

.wa-rund{ flex:none; width:38px; height:38px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; }
.wa-rund svg{ width:19px; height:19px; fill:#fff; }
.pfeil{ flex:none; width:8px; height:8px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg); opacity:.4; margin-right:2px; transition:transform .15s ease; }
.karte[open] > summary .pfeil{ transform:rotate(225deg); }

.karte .inhalt{ padding:0 14px 16px; border-top:1px solid var(--rule); }

.daten{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:14px 0 0; }
.daten > div.voll{ grid-column:1 / -1; }
.daten dt{ font-size:9px; letter-spacing:1.3px; text-transform:uppercase; opacity:.55; margin-bottom:2px; }
.daten dd{ margin:0; font-size:14px; line-height:19px; word-break:break-word; }
.daten a{ text-decoration:underline; }

.schritte{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:16px; }
.schritte form{ display:block; }
.schritt{ width:100%; font:inherit; font-size:12px; line-height:15px; display:flex; align-items:center; gap:7px; padding:11px 10px; border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer; text-align:left; }
.schritt .haken{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border:1px solid var(--rule); font-size:10px; line-height:1; }
.schritt.an{ background:var(--ink); color:#fff; border-color:var(--ink); }
.schritt.an .haken{ border-color:rgba(255,255,255,.6); }
.schritt.warnung.an{ background:#C8721F; border-color:#C8721F; color:#fff; }
.schritt.warnung.an .haken{ border-color:rgba(255,255,255,.6); }

.karte .details{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.karte .details label{ display:block; }
.karte .details label > span{ display:block; font-size:9px; letter-spacing:1.3px; text-transform:uppercase; opacity:.55; margin-bottom:3px; }
.karte .details .paar{ display:grid; grid-template-columns:1fr 100px; gap:9px; }
.karte .details input, .karte .details textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:inherit; padding:9px 10px; border:1px solid var(--rule); background:var(--paper); border-radius:0; resize:vertical; }
.karte .details input:focus, .karte .details textarea:focus{ outline:2px solid var(--ink); outline-offset:-1px; }
.speichern{ align-self:flex-start; font:inherit; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; padding:11px 20px; background:var(--ink); color:#fff; border:0; cursor:pointer; }

.karte .absagen{ margin-top:14px; }
.karte .absagen button{ font:inherit; font-size:12px; background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; color:var(--ink); opacity:.6; }

/* ─── Laufzettel ─── */
.laufzettel .zeile{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule); }
.laufzettel .uhr{ font-family:var(--serif); font-size:22px; width:62px; flex:none; }
.laufzettel .name{ margin:0; font-size:16px; }
.laufzettel .name .klein{ opacity:.65; margin-left:8px; font-size:12px; }
.laufzettel .klein{ font-size:13px; opacity:.8; margin:2px 0 0; }
.laufzettel .notizzeile{ margin:5px 0 0; font-size:13px; background:var(--stone); padding:7px 9px; }
.laufzettel .zeile.leer, .laufzettel .zeile.gesperrt{ opacity:.4; }

/* ─── Kalender ─── */
.kalender-huelle{ overflow-x:auto; }
.kalender{ border-collapse:collapse; font-size:12px; min-width:620px; }
.kalender th, .kalender td{ border:1px solid var(--rule); padding:7px 9px; text-align:left; }
.kalender thead th{ font-size:10px; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap; position:sticky; top:0; background:var(--paper); }
.kalender thead a{ text-decoration:underline; }
.kalender .stunde{ font-family:var(--serif); font-size:15px; font-weight:400; white-space:nowrap; }
.kalender .ecke{ border:0; }
.kalender .zelle{ min-width:100px; }
.kalender .frei{ color:#B4ADA8; }
.kalender .gebucht{ background:var(--ink); }
.kalender .gebucht a{ color:#fff; text-decoration:none; }
.kalender .gesperrt{ background:var(--stone); color:#8C8580; }
.kalender .keiner{ background:repeating-linear-gradient(135deg,#fff,#fff 6px,#F3F1EF 6px,#F3F1EF 12px); }

@media print{
  .nicht-drucken{ display:none !important; }
  .laufzettel .zeile.leer{ display:none; }
}

@media (min-width:760px){
  .kopfleiste-innen, .chips-innen, .liste{ padding-left:24px; padding-right:24px; }
  .kopfleiste h1{ font-size:36px; }
  .daten{ grid-template-columns:repeat(4, 1fr); }
  .schritte{ grid-template-columns:repeat(4, 1fr); }
  .karte .details .paar{ grid-template-columns:1fr 1fr 120px; }
}


/* ─── Vormerkungen fürs nächste Jahr ─── */
.vormerk-formulare{ display:grid; grid-template-columns:1fr; gap:14px; margin:0 0 26px; }
.vormerk-form{ background:var(--stone); padding:16px 16px 18px; display:flex; flex-direction:column; gap:9px; }
.vormerk-form label{ display:block; }
.vormerk-form label > span{ display:block; font-size:9px; letter-spacing:1.3px; text-transform:uppercase; opacity:.6; margin-bottom:3px; }
.vormerk-form input{ width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:inherit; padding:9px 10px; border:1px solid var(--rule); background:var(--paper); border-radius:0; }
.vormerk-form input:focus{ outline:2px solid var(--ink); outline-offset:-1px; }

.vormerk-karte{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border:1px solid var(--rule); padding:13px 14px; margin-bottom:8px; }
.vormerk-karte .name{ margin:0; font-size:15px; }
.vormerk-karte .unter{ margin:2px 0 0; font-size:11px; opacity:.65; }
.vormerk-karte .unter a{ text-decoration:underline; }
.vormerk-karte .unter .punkt{ display:inline-block; margin-left:6px; padding:1px 7px; background:var(--stone); font-size:10px; letter-spacing:.6px; }
.vormerk-karte .notizzeile{ margin:5px 0 0; font-size:13px; background:var(--stone); padding:6px 9px; }
.entfernen-knopf{ flex:none; width:30px; height:30px; font-size:14px; line-height:1; background:transparent; color:var(--ink); border:1px solid var(--rule); cursor:pointer; opacity:.6; }
.entfernen-knopf:hover{ opacity:1; border-color:var(--ink); }

@media (min-width:640px){
  .vormerk-formulare{ grid-template-columns:1fr 1fr; }
}

/* ─── Statistik ─── */
.stat-raster{ display:grid; grid-template-columns:1fr; gap:14px; }
.stat-karte{ background:var(--stone); padding:18px 18px 20px; box-sizing:border-box; }
.stat-titel{ margin:0 0 14px; font-size:13px; line-height:1.4; opacity:.75; }
.stat-gross{ font-family:var(--serif); font-weight:300; font-size:44px; line-height:1; margin:0 0 4px; }

.stat-balken{ display:flex; height:10px; background:var(--paper); overflow:hidden; }
.stat-balken .teil{ display:block; height:100%; }
.stat-balken .teil.ja{ background:var(--ink); }
.stat-balken .teil.absprache{ background:rgba(61,55,51,.45); }
.stat-balken .teil.nein{ background:rgba(61,55,51,.12); }

.stat-legende{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; }
.stat-legende span{ display:flex; align-items:center; gap:6px; }
.stat-legende b{ font-weight:600; }
.stat-legende i{ width:9px; height:9px; display:inline-block; flex:none; }
.stat-legende i.ja{ background:var(--ink); }
.stat-legende i.absprache{ background:rgba(61,55,51,.45); }
.stat-legende i.nein{ background:rgba(61,55,51,.12); border:1px solid var(--rule); }

.stat-verteilung{ display:flex; flex-direction:column; gap:7px; }
.stat-verteilung .zeile{ display:grid; grid-template-columns:78px 1fr 22px; align-items:center; gap:10px; font-size:12px; }
.stat-verteilung.breit .zeile{ grid-template-columns:132px 1fr 28px; }
.stat-verteilung .lab{ opacity:.7; white-space:nowrap; }
.stat-verteilung .bal{ display:block; height:7px; background:var(--paper); }
.stat-verteilung .bal i{ display:block; height:100%; background:var(--ink); }
.stat-verteilung .zahl{ text-align:right; }

@media (min-width:640px){
  .stat-raster{ grid-template-columns:1fr 1fr; }
}