/* =========================================================
   FARBEN

   Diese Fassung steht auf Gruen und Flieder statt auf Creme und
   Warmgelb, und sie ist bewusst pastellig gehalten. Die
   Sonnenblumen sind dieselben wie in der warmen Fassung, nur
   groesser und mit einem weichen Schein dahinter.

   --lila heisst in der gelben Fassung --rose und --salbei dort
   --gold. Die Namen sind mit umgezogen, damit hier nichts mehr
   nach Rosa und Gold klingt, was gar nicht mehr so aussieht.

   Warum es den Flieder dreimal gibt: pastellige Farben sehen
   schoen aus, sind als Schrift aber schnell zu blass zum Lesen.
   Deshalb ist der helle Ton nur fuer Flaechen und Raender da,
   der mittlere fuer grosse Schrift und der dunkle fuer kleine.
   Wenn du daran drehst, halte diese Staffelung ein, sonst wird
   die Seite huebsch und unlesbar zugleich.

   Willst du an den Farben drehen, fang hier an. Fast alles
   Weitere haengt an diesen Werten.
   ========================================================= */
:root{
    --paper:#E9EEE3;        /* Grundton der Seite, weiches Pastellgruen */
    --paper-deep:#D6DECB;   /* wo das Papier tiefer liegt */
    --karte:#FBFAFD;        /* Karten und Polaroids, ein Hauch Flieder */

    --ink:#2E332C;          /* Fliesstext, sehr dunkles Waldgruen */
    --ink-soft:#616B5D;     /* leiser Text, Untertitel */

    --lila:#A186C9;         /* nur Flaechen und Raender, nie Schrift */
    --lila-mittel:#9878C0;  /* grosse Schrift, ab etwa 24 Punkt */
    --lila-tief:#6E51A2;    /* kleine Schrift */
    --pflaume:#4A3A63;      /* Ueberschriften der Abschnitte */
                            /* Fokusrahmen nehmen --lila-tief, der
                               helle Ton waere auf dem Papier zu
                               schwach, um zu zeigen, wo man ist */

    --sage:#93AC88;         /* Blattgruen */
    --salbei:#728E65;       /* Zierlinien und die Schnur der Girlande */
    --tape:rgba(161,134,201,.3);

    /* Die alten Namen bleiben gueltig, damit nichts bricht,
       falls irgendwo noch --rose oder --gold steht */
    --rose:var(--lila);
    --gold:var(--salbei);
  }

  *{box-sizing:border-box;}
  html{
    height:100%;
    background:var(--paper);
    color-scheme:light only;
    scroll-behavior:smooth;
  }
  body{
    margin:0;min-height:100%;
    background:var(--paper);
    color:var(--ink);
    font-family:"Karla",system-ui,sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }

  /* Papierkorn ueber der ganzen Seite */
  body::after{
    content:"";
    position:fixed;inset:0;z-index:99;
    pointer-events:none;opacity:.4;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  }
  /* Vignette */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:98;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 52%,rgba(78,88,74,.16) 100%);
  }

  .hand{font-family:"Caveat",cursive;font-weight:400;}
  .serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400;}

  /* ================= COUNTDOWN ================= */
  #countdown-view{
    min-height:100dvh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:clamp(34px,7vw,72px) 22px;
    text-align:center;
  }

  .eyebrow{
    font-family:"Caveat",cursive;
    font-size:clamp(1.5rem,4.6vw,2.15rem);
    color:var(--lila-mittel);
    transform:rotate(-2.2deg);
    margin:0 0 .1em;
  }

  .names{
    font-family:"Instrument Serif",Georgia,serif;
    font-size:clamp(3rem,12vw,6.4rem);
    line-height:.92;
    font-weight:400;
    margin:.08em 0 0;
    letter-spacing:-.015em;
  }
  .names .amp{
    font-family:"Instrument Serif",serif;
    font-style:italic;
    color:var(--lila-mittel);
    font-size:.78em;
    padding:0 .12em;
  }

  .stamp{
    display:inline-block;
    margin-top:1.1em;
    font-size:clamp(.66rem,1.9vw,.78rem);
    font-weight:600;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border-top:1px solid rgba(46,51,44,.22);
    border-bottom:1px solid rgba(46,51,44,.22);
    padding:.55em .2em;
  }

  /* ---- Polaroid ---- */
  .polaroid{
    position:relative;
    width:min(340px,78vw);
    margin:clamp(34px,6vw,52px) auto clamp(26px,5vw,40px);
    background:var(--karte);
    padding:14px 14px 0;
    border-radius:2px;
    transform:rotate(-2.6deg);
    box-shadow:
      0 1px 2px rgba(46,51,44,.14),
      0 18px 38px rgba(74,84,70,.22);
    transition:transform .5s cubic-bezier(.2,.8,.3,1);
  }
  .polaroid:hover{transform:rotate(-.6deg) scale(1.022);}

  .polaroid .shot{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    background:var(--paper-deep);
  }
  .polaroid .shot img{
    width:100%;height:100%;object-fit:cover;display:block;
    /* Kein Sepia wie in der gelben Fassung, das zoege die
       Bilder ins Braune und schluege sich mit dem Lila.
       Stattdessen nur leicht zurueckgenommene Farben und ein
       Hauch kuehler, das passt zu Gruen und Flieder. */
    filter:saturate(.9) contrast(1.04) brightness(1.02) hue-rotate(-6deg);
  }
  /* Kuehler Foto-Schleier, typisch Sofortbild */
  .polaroid .shot::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(200deg,rgba(232,224,245,.16),transparent 46%),
      radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(64,74,60,.24) 100%);
    mix-blend-mode:multiply;
  }

  .polaroid .caption{
    font-family:"Caveat",cursive;
    font-size:clamp(1.35rem,4vw,1.7rem);
    color:#454E43;
    padding:.52em 0 .62em;
    line-height:1.15;
    transform:rotate(-.8deg);
  }

  /* Klebestreifen */
  .tape{
    position:absolute;z-index:2;
    width:104px;height:27px;
    background:var(--tape);
    border-left:1px dashed rgba(255,255,255,.5);
    border-right:1px dashed rgba(255,255,255,.5);
    box-shadow:0 1px 2px rgba(46,51,44,.1);
  }
  .tape.tl{top:-13px;left:-24px;transform:rotate(-27deg);}
  .tape.br{bottom:26px;right:-26px;transform:rotate(-24deg);}

  /* ---- Wachsender Sonnenblumen-Garten ---- */
  #garden{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .plant{
    position:absolute;
    bottom:-1%;
    transform-origin:50% 100%;
    will-change:transform;
  }
  .plant .leaves{opacity:var(--leaf,1);}
  .plant .stems{opacity:var(--stem,1);}
  .plant .head{
    transform-box:view-box;
    transform-origin:212px 214px;
    transform:scale(var(--head,1));
  }

  /* Die Blüte.

     Sonnig, aber nicht grell: ein warmes Buttergelb außen, ein
     satteres innen. Auf dem hellgrünen Papier wirkt das voller
     als ein hartes Goldgelb, das neben dem Flieder schnell
     schreit. Der Schein dahinter ist der Verlauf sonnenschein
     aus dem HTML. */
  .schein{fill:url(#sonnenschein);}
  .petal-outer{fill:#F0C255;}
  .petal-inner{fill:#DFA73C;}
  .disc{fill:#70502F;}
  .disc-in{fill:#553921;}
  .seed{fill:#8E6A3D;opacity:.7;}
  .sepal{fill:#87A17B;}

  /* Stiel und Blätter.

     Dieselbe Form wie in der warmen Fassung, nur pastelliger und
     eine Spur kühler, damit das Grün zum Flieder passt. */
  .stem{fill:none;stroke:#87A17B;stroke-width:9;stroke-linecap:round;}
  .stem-hi{fill:none;stroke:#A2B896;stroke-width:3.4;stroke-linecap:round;}
  .leaf{fill:#9AB08F;}
  .leaf-2{fill:#89A07E;}
  .vein{stroke:#6E8763;stroke-width:1.2;fill:none;opacity:.5;}

  /* Honigfarbener Grund, schließt am Ende die letzten Lücken.
     Er greift das Gelb der Blüten auf, nicht das Lila der Seite,
     sonst sähe der Bildschirm kurz vor Mitternacht aus wie ein
     Farbfehler statt wie ein Sonnenblumenfeld. */
  #wash{
    position:absolute;inset:0;
    background:#E8C368;
    opacity:0;
  }
  /* Grün liegt hinten, Blüten immer davor */
  #greens{position:absolute;inset:0;z-index:1;}
  #blooms{position:absolute;inset:0;z-index:2;}
  /* Heller Schleier oben, hält den Kopfbereich frei */
  #glow{
    position:absolute;top:0;left:0;right:0;
    height:52vh;z-index:3;
    background:radial-gradient(ellipse 78% 100% at 50% 0%,
      rgba(233,238,227,.95) 0%,
      rgba(233,238,227,.78) 42%,
      rgba(233,238,227,.34) 68%,
      transparent 86%);
  }

  .bloom{
    position:absolute;
    transform-origin:50% 50%;
    will-change:transform;
    animation:nick var(--dur,9s) ease-in-out infinite alternate;
    animation-delay:var(--delay,0s);
  }
  @keyframes nick{
    from{rotate:-2deg;}
    to{rotate:2.5deg;}
  }
  @media (prefers-reduced-motion:reduce){
    .bloom{animation:none;}
  }

  /* Auf der Homepage tritt der Garten zurück, damit der Text lesbar bleibt */
  #garden.calm{opacity:.42;}

  /* ---- Testfenster ----

     Ein kleiner Knopf unten rechts. Antippen klappt das Fenster
     auf, nach der Auswahl klappt es von selbst wieder zu, damit
     die Seite frei liegt. Im Livebetrieb ist der ganze Block
     nicht in der Seite, siehe SIMULATION in script.js. */
  .sim{
    position:fixed;z-index:60;
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  }

  .sim-griff{
    width:48px;height:48px;flex:none;
    border-radius:50%;cursor:pointer;
    background:rgba(251,250,253,.94);
    border:1px solid rgba(46,51,44,.18);
    box-shadow:0 6px 18px rgba(74,84,70,.24);
    backdrop-filter:blur(6px);
    color:#F0C255;
    display:flex;align-items:center;justify-content:center;
    padding:0;
    transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease;
  }
  .sim-griff svg{width:26px;height:26px;display:block;}
  .sim-griff:hover{box-shadow:0 8px 22px rgba(74,84,70,.32);}
  .sim-griff:focus-visible{outline:2px solid var(--lila-tief);outline-offset:3px;}
  .sim-griff[aria-expanded="true"]{transform:rotate(135deg);}

  /* ---- Kurzinfo im Echtbetrieb ----

     Sitzt an derselben Stelle wie das Testfenster und teilt sich
     dessen Aussehen. Erscheinen kann immer nur eines von beiden,
     das entscheidet SIMULATION in script.js. */
  .kurzinfo{
    position:fixed;z-index:60;
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  }
  .kurzinfo[hidden]{display:none;}

  .ki-griff{
    width:48px;height:48px;flex:none;
    border-radius:50%;cursor:pointer;
    background:rgba(251,250,253,.94);
    border:1px solid rgba(46,51,44,.18);
    box-shadow:0 6px 18px rgba(74,84,70,.24);
    backdrop-filter:blur(6px);
    color:#F0C255;
    display:flex;align-items:center;justify-content:center;
    padding:0;
    transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease;
  }
  .ki-griff svg{width:26px;height:26px;display:block;}
  .ki-griff:hover{box-shadow:0 8px 22px rgba(74,84,70,.32);}
  .ki-griff:focus-visible{outline:2px solid var(--lila-tief);outline-offset:3px;}
  /* Offen dreht sich die Blume ein Stueck, das ist der Hinweis,
     dass hier gerade etwas aufgeklappt ist */
  .ki-griff[aria-expanded="true"]{transform:rotate(45deg);}

  .ki-kasten{
    width:min(300px,calc(100vw - 28px));
    background:rgba(251,250,253,.96);
    border:1px solid rgba(46,51,44,.16);
    border-radius:16px;
    padding:16px 16px 14px;
    box-shadow:0 12px 34px rgba(74,84,70,.26);
    backdrop-filter:blur(8px);
    transform-origin:bottom right;
    animation:sim-auf .22s cubic-bezier(.2,.8,.3,1);
  }
  .ki-kasten[hidden]{display:none;}

  .ki-titel{
    font-family:"Karla",sans-serif;font-size:.66rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--lila-tief);margin:0 0 .9em;
  }

  .ki-liste{margin:0;}
  .ki-liste dt{
    font-family:"Karla",sans-serif;
    font-size:.62rem;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:.3em;
  }
  .ki-liste dd{
    margin:0 0 1em;
    font-size:.92rem;line-height:1.5;
    color:var(--ink);
  }
  .ki-liste dd:last-of-type{margin-bottom:.9em;}

  .ki-link{
    display:block;text-align:center;
    font-family:"Karla",sans-serif;
    font-size:.7rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;
    color:var(--ink-soft);
    border:1px solid rgba(46,51,44,.2);
    border-radius:99px;
    padding:.7em 1em;
    transition:background .2s ease,color .2s ease;
  }
  .ki-link:hover{background:rgba(161,134,201,.14);color:var(--ink);}
  .ki-link:focus-visible{outline:2px solid var(--lila-tief);outline-offset:2px;}

  .sim-kasten{
    width:min(300px,calc(100vw - 28px));
    background:rgba(251,250,253,.96);
    border:1px solid rgba(46,51,44,.16);
    border-radius:16px;
    padding:14px 14px 12px;
    box-shadow:0 12px 34px rgba(74,84,70,.26);
    backdrop-filter:blur(8px);
    transform-origin:bottom right;
    animation:sim-auf .22s cubic-bezier(.2,.8,.3,1);
  }
  .sim-kasten[hidden]{display:none;}
  @keyframes sim-auf{
    from{opacity:0;transform:translateY(8px) scale(.94);}
    to{opacity:1;transform:none;}
  }

  .sim-titel{
    font-family:"Karla",sans-serif;font-size:.66rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-soft);margin:0 0 .5em;
  }
  .sim-info{
    font-family:"Caveat",cursive;font-size:1.15rem;
    color:var(--ink);line-height:1.2;margin:0 0 .7em;
    min-height:1.3em;
  }

  .sim-range{
    -webkit-appearance:none;appearance:none;
    width:100%;height:6px;border-radius:99px;margin:0 0 12px;
    background:linear-gradient(90deg,#93AC88,#A186C9);
    cursor:pointer;
  }
  .sim-range::-webkit-slider-thumb{
    -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:var(--karte);border:2px solid #728E65;cursor:grab;
    box-shadow:0 2px 6px rgba(74,84,70,.3);
  }
  .sim-range::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;
    background:var(--karte);border:2px solid #728E65;cursor:grab;
  }
  .sim-range:focus-visible{outline:2px solid var(--lila-tief);outline-offset:4px;}

  .sim-gitter{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
  }
  .sim-btn{
    font-family:"Karla",sans-serif;font-size:.72rem;font-weight:600;
    letter-spacing:.04em;
    background:transparent;color:var(--ink-soft);
    border:1px solid rgba(46,51,44,.2);border-radius:9px;
    padding:.62em .5em;cursor:pointer;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  .sim-btn:hover{background:rgba(161,134,201,.14);color:var(--ink);}
  .sim-btn:focus-visible{outline:2px solid var(--lila-tief);outline-offset:2px;}
  .sim-btn[disabled]{opacity:.45;cursor:default;}
  .sim-btn.stark{
    grid-column:1 / -1;
    background:var(--ink);color:var(--paper);border-color:var(--ink);
  }
  .sim-btn.stark:hover{background:#454E43;color:var(--paper);}

  /* ---- Letzte 24 Stunden: die große Uhr ---- */
  .clock.final{
    gap:clamp(6px,1.6vw,14px);
    align-items:flex-start;
  }
  .clock.final .unit{min-width:clamp(52px,15vw,96px);}
  .clock.final .num{
    font-size:clamp(2.7rem,11vw,5rem);
    letter-spacing:.02em;
  }
  .clock.final .sep{
    font-size:clamp(1.6rem,6vw,3rem);
    color:var(--gold);opacity:.55;
  }
  .clock.final .lab{
    font-size:clamp(.6rem,1.6vw,.76rem);
    letter-spacing:.16em;
  }
  .readable.final{
    padding-top:clamp(16px,3vw,26px);
    border-top:1px solid rgba(114,142,101,.45);
    border-bottom:1px solid rgba(114,142,101,.45);
  }

  /* ---- Konfetti ---- */
  #konfetti{
    position:fixed;inset:0;z-index:55;
    pointer-events:none;
    display:none;
  }
  #konfetti.an{display:block;}
  #garden.geplatzt{opacity:0;transition:opacity .5s ease;}

  /* ---- Festliches Design nach dem Countdown ---- */
  body.feier{
    background:#F5F3F9;
  }
  body.feier #home-view{
    background:
      radial-gradient(ellipse 90% 50% at 50% 0%, rgba(161,134,201,.16), transparent 62%),
      radial-gradient(ellipse 70% 40% at 50% 100%, rgba(161,134,201,.14), transparent 70%);
  }
  body.feier .home-hero .names{
    background:linear-gradient(100deg,#728E65 0%,#5E4489 48%,#728E65 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  body.feier .sec-title{color:#4A3A63;}
  body.feier .now-card{
    border:1px solid rgba(114,142,101,.5);
    box-shadow:0 12px 34px rgba(110,81,162,.16);
  }

  /* ---- Polaroid-Girlande ----

     Die Schnur liegt als SVG im Hintergrund und darf sich frei
     in die Breite ziehen. Die Bilder haengen als eigene
     Elemente darueber, damit sie echte Polaroids sein koennen
     und nicht nur gemalte Dreiecke.

     Die Schnur haengt in der Mitte tiefer durch. Damit die
     Bilder das mitmachen, bekommt jedes ueber --sack einen
     eigenen kleinen Versatz nach unten. */
  .girlande{
    position:relative;
    width:100%;
    padding-top:8px;
    margin-bottom:clamp(14px,2.5vw,24px);
  }
  /* Die Schnur liegt hinter den Bildern und spannt sich ueber
     die volle Breite. Die Hoehe hier und die Werte bei --sack
     weiter unten gehoeren zusammen: beide beschreiben denselben
     Durchhang, einmal fuer die Linie, einmal fuer die Bilder. */
  .girlande .schnur{
    position:absolute;z-index:0;
    top:8px;left:0;
    width:100%;
    height:clamp(22px,3.4vw,32px);
  }
  .girlande .schnur path{
    fill:none;stroke:#728E65;stroke-width:1.6;
    vector-effect:non-scaling-stroke;
  }

  /* Die Bilder haengen auf der Schnur, nicht darunter.
     Der Durchhang laeuft ueber margin-top und nicht ueber
     transform, sonst wuesste die Seite nicht, wie hoch die
     Girlande am Ende wirklich ist, und die untersten Bilder
     ragten in den Text darunter. */
  .waescheleine{
    position:relative;z-index:1;
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:0 clamp(10px,3vw,34px);
  }

  /* Ein echtes Sofortbild hat einen schmalen Rand ringsum und
     einen deutlich breiteren unten. Damit das in jeder Groesse
     stimmt, sind die Raender hier in Prozent der Breite
     angegeben und nicht in Punkten. */
  .girlande .mini{
    position:relative;
    margin:var(--sack,0) 0 0;
    flex:0 0 auto;
    --b:clamp(56px,10vw,96px);
    width:var(--b);
    background:linear-gradient(168deg,#FFFEFF 0%,#F8F6FB 62%,#EDEAF3 100%);
    padding:calc(var(--b) * .07) calc(var(--b) * .07) calc(var(--b) * .2);
    border-radius:2px;
    box-shadow:
      0 1px 1px rgba(46,51,44,.2),
      0 8px 18px rgba(74,84,70,.22);
    transform:rotate(var(--kipp,0deg));
    transform-origin:50% 0;
  }
  /* Das Bild ist quadratisch. Die Hoehe steht hier ausgerechnet
     da und nicht als aspect-ratio, weil manche Browser die
     Angabe bei Bildern mit width- und height-Attribut nicht
     befolgen und das Polaroid dann in die Laenge gezogen wird.
     .86 ist die Breite abgezueglich der beiden Seitenraender. */
  .girlande .mini img{
    display:block;
    width:100%;
    height:calc(var(--b) * .86);
    object-fit:cover;
    filter:saturate(.88) contrast(1.05) hue-rotate(-6deg);
  }
  /* Ein Hauch Glanz auf der Folie, sonst wirkt es wie ein
     aufgeklebtes Rechteck und nicht wie ein Bild */
  .girlande .mini::before{
    content:"";position:absolute;z-index:2;inset:0;
    border-radius:2px;
    background:linear-gradient(112deg,rgba(255,255,255,.5) 0%,transparent 26%);
    pointer-events:none;
  }

  /* Waescheklammer, mit der das Bild an der Schnur haengt */
  .girlande .klammer{
    position:absolute;z-index:2;
    top:-7px;left:50%;
    width:7px;height:15px;
    margin-left:-3.5px;
    background:#C3B2DC;
    border-radius:2px;
    box-shadow:0 1px 1px rgba(46,51,44,.2);
  }
  .girlande .klammer::after{
    content:"";position:absolute;
    top:5px;left:0;right:0;height:1px;
    background:rgba(74,84,70,.35);
  }

  /* Durchhang und Schraeglage, damit nichts wie am Lineal wirkt.
     Die Werte folgen der Kurve der Schnur: aussen haengt sie
     kaum, in der Mitte am tiefsten. */
  .girlande .mini:nth-child(1){--sack:clamp(4px,.6vw,6px);   --kipp:-6deg;}
  .girlande .mini:nth-child(2){--sack:clamp(12px,1.9vw,18px);--kipp:4.5deg;}
  .girlande .mini:nth-child(3){--sack:clamp(16px,2.5vw,24px);--kipp:-3deg;}
  .girlande .mini:nth-child(4){--sack:clamp(16px,2.5vw,24px);--kipp:5deg;}
  .girlande .mini:nth-child(5){--sack:clamp(12px,1.9vw,18px);--kipp:-4.5deg;}
  .girlande .mini:nth-child(6){--sack:clamp(4px,.6vw,6px);   --kipp:6deg;}

  /* Auf schmalen Handys reichen vier Bilder, sonst wird es eng.
     Die beiden verbliebenen mittleren ruecken dabei tiefer, weil
     sie naeher an den tiefsten Punkt der Schnur wandern. */
  @media (max-width:560px){
    .girlande .mini.extra{display:none;}
    .girlande .mini{--b:clamp(64px,17vw,96px);}
    .girlande .mini:nth-child(2){--sack:clamp(15px,4.4vw,22px);}
    .girlande .mini:nth-child(5){--sack:clamp(15px,4.4vw,22px);}
  }

  /* Zierlinie in Salbei */
  .zierlinie{
    display:block;margin:clamp(16px,3vw,26px) auto;
    width:clamp(160px,40%,260px);height:14px;overflow:visible;
  }
  .zierlinie line,.zierlinie path{fill:none;stroke:#728E65;stroke-width:1;}
  .zierlinie circle{fill:#728E65;}

  /* ================= FOTOS UND MUSIK ================= */
  .home-nav{
    display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
    padding:18px 22px 0;
  }
  .home-nav a{
    font-family:"Karla",sans-serif;font-size:.76rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;color:var(--ink-soft);
    border:1px solid rgba(46,51,44,.18);border-radius:99px;
    padding:.5em 1.1em;transition:all .2s ease;
  }
  .home-nav a:hover{background:rgba(161,134,201,.14);color:var(--ink);}

  .lead-text{text-align:center;color:var(--ink-soft);margin:-.4em 0 1.8em;}


  /* ---- Album "So haben wir uns kennengelernt" ----

     Zwanzig Polaroids, lose nebeneinandergelegt. Auf dem Handy
     stehen sie untereinander, ab Tablettbreite zu zweit, auf
     grossen Schirmen zu dritt.

     Jedes Bild ist ueber --kipp ein wenig schraeg gelegt. Die
     Werte stehen im HTML am jeweiligen Polaroid, damit nicht
     alle gleich liegen. */
  .wrap.weit{max-width:1000px;}

  .album{
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(30px,5vw,52px) clamp(20px,4vw,38px);
    justify-items:center;
    align-items:start;
  }
  @media (min-width:600px){
    .album{grid-template-columns:1fr 1fr;}
  }
  @media (min-width:920px){
    .album{grid-template-columns:1fr 1fr 1fr;}
  }

  /* Im Album sind die Polaroids kleiner als das grosse oben im
     Kopf, und sie bringen ihre eigene Schraeglage mit. */
  .album .polaroid{
    width:100%;
    max-width:300px;
    margin:0;
    transform:rotate(var(--kipp,0deg));
  }
  .album .polaroid:hover{
    transform:rotate(0deg) scale(1.03);
    z-index:2;
  }
  /* Hochformat bleibt hochkant, Querformat liegt quer. Beides
     wird mittig beschnitten, aber deutlich weniger, als wenn
     alle Bilder quadratisch waeren. */
  .album .polaroid.hoch .shot{aspect-ratio:4/5;}
  .album .polaroid.quer .shot{aspect-ratio:5/4;}

  .album .caption{
    font-size:clamp(1.1rem,3vw,1.3rem);
    padding:.5em .4em .6em;
  }

  /* Der Klebestreifen ist im Album schmaler, sonst erschlaegt er
     die kleineren Bilder. Und er sitzt mal links, mal rechts. */
  .album .tape{
    width:74px;height:20px;
  }
  .album .polaroid .tape.tl{top:-9px;left:-16px;}
  .album .polaroid:nth-child(even) .tape.tl{
    left:auto;right:-16px;transform:rotate(27deg);
  }

  /* Bis wann Bilder angenommen werden.
     Steht ueber dem Hochladefeld, damit niemand erst danach
     merkt, dass die Sammlung schon zu ist. */
  .frist{
    text-align:center;
    font-family:"Karla",sans-serif;
    font-size:.82rem;font-weight:600;
    letter-spacing:.06em;
    color:var(--lila-tief);
    background:rgba(161,134,201,.1);
    border-radius:99px;
    padding:.7em 1.2em;
    max-width:34ch;
    margin:-.6em auto clamp(18px,3.5vw,26px);
  }
  /* Nach Ablauf ruhiger, es ist ja nichts mehr zu tun */
  .frist.vorbei{
    color:var(--ink-soft);
    background:rgba(46,51,44,.06);
  }

  /* Hochladen */
  .upload{
    border:1.5px dashed var(--rose);
    border-radius:14px;
    padding:clamp(22px,5vw,34px);
    text-align:center;
    background:rgba(251,250,253,.7);
    margin-bottom:clamp(28px,5vw,44px);
  }
  .upload input[type=file]{display:none;}
  .knopf{
    display:inline-block;
    font-family:"Karla",sans-serif;font-size:.82rem;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);
    border:none;border-radius:99px;
    padding:.85em 1.7em;cursor:pointer;
    transition:transform .15s ease;
  }
  .knopf:hover{transform:translateY(-2px);}
  .knopf.hell{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
  .knopf:focus-visible{outline:2px solid var(--lila-tief);outline-offset:3px;}
  .upload .hinweis{font-family:"Caveat",cursive;font-size:1.15rem;color:var(--ink-soft);margin:.9em 0 0;}

  /* Siegertreppchen der schönsten Bilder */
  .top-liste{display:grid;gap:clamp(16px,3vw,26px);margin-bottom:clamp(34px,6vw,56px);}
  @media(min-width:640px){.top-liste{grid-template-columns:1fr 1fr;}}
  .top-karte{
    position:relative;
    background:var(--karte);
    padding:12px 12px 0;
    box-shadow:0 12px 34px rgba(74,84,70,.2);
    transform:rotate(var(--kipp,-1.4deg));
  }
  .top-karte:nth-child(1){--kipp:-1.8deg;}
  .top-karte:nth-child(2){--kipp:1.6deg;}
  .top-karte:nth-child(3){--kipp:-1.1deg;}
  @media(min-width:640px){
    .top-karte:nth-child(1){grid-column:1 / -1;}
  }
  .top-karte img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;}
  .top-karte:nth-child(1) img{aspect-ratio:16/10;}
  .top-karte .platz{
    position:absolute;top:-14px;left:-12px;z-index:3;
    width:46px;height:46px;border-radius:50%;
    background:var(--gold);color:#FAF7FD;
    font-family:"Instrument Serif",serif;font-size:1.4rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(74,84,70,.3);
  }
  .top-karte .fuss{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:.6em .2em .8em;
  }
  .top-karte .von{font-family:"Caveat",cursive;font-size:1.25rem;color:#454E43;}

  /* Restliche Bilder */
  .foto-gitter{
    display:grid;gap:12px;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
  .foto-karte{
    background:var(--karte);padding:8px 8px 0;
    box-shadow:0 6px 18px rgba(74,84,70,.12);
  }
  .foto-karte img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;}
  .foto-karte .fuss{display:flex;align-items:center;justify-content:space-between;padding:.45em .1em .6em;}
  .foto-karte .von{font-family:"Caveat",cursive;font-size:1.05rem;color:#454E43;}

  /* Herz-Knopf */
  .stimme{
    display:inline-flex;align-items:center;gap:.4em;
    background:transparent;border:1px solid rgba(46,51,44,.2);
    border-radius:99px;padding:.28em .7em;
    font-family:"Karla",sans-serif;font-size:.8rem;font-weight:600;
    color:var(--ink-soft);cursor:pointer;
    transition:all .18s ease;
  }
  .stimme:hover{border-color:var(--lila);color:var(--lila-tief);}
  .stimme[aria-pressed=true]{background:var(--lila-tief);border-color:var(--lila-tief);color:#FBFAFD;}
  .stimme:focus-visible{outline:2px solid var(--lila-tief);outline-offset:2px;}
  .stimme .herz{font-size:.95em;line-height:1;}

  .leer{
    text-align:center;color:var(--ink-soft);
    font-family:"Caveat",cursive;font-size:1.3rem;
    padding:34px 0;
  }

  /* Musikwünsche */
  .wunsch-form{
    display:grid;gap:10px;margin-bottom:clamp(26px,5vw,40px);
  }
  @media(min-width:560px){.wunsch-form{grid-template-columns:1fr 1fr auto;}}
  .wunsch-form input{
    font-family:"Karla",sans-serif;font-size:1rem;
    padding:.85em 1em;border-radius:10px;
    border:1px solid rgba(46,51,44,.2);
    background:var(--karte);color:var(--ink);
  }
  .wunsch-form input:focus{outline:2px solid var(--lila-tief);outline-offset:1px;}

  .lied{
    display:flex;align-items:center;gap:14px;
    padding:14px 4px;
    border-bottom:1px dashed rgba(46,51,44,.18);
  }
  .lied:last-child{border-bottom:none;}
  .lied .rang{
    font-family:"Instrument Serif",serif;font-size:1.3rem;
    color:var(--ink-soft);min-width:32px;text-align:center;
  }
  .lied .titel{flex:1;min-width:0;}
  .lied .titel b{font-weight:600;font-size:1.02rem;display:block;}
  .lied .titel span{color:var(--ink-soft);font-size:.9rem;}
  .lied.spitze{
    background:rgba(161,134,201,.14);
    border-radius:12px;padding:14px 12px;margin-bottom:8px;
    border-bottom:none;
  }
  .lied.spitze .rang{color:var(--gold);font-size:1.6rem;}

  /* Musiksuche */
  .suche{position:relative;margin-bottom:14px;}
  .suche input{
    width:100%;
    font-family:"Karla",sans-serif;font-size:1.05rem;
    padding:.95em 1.1em;border-radius:12px;
    border:1px solid rgba(46,51,44,.22);
    background:var(--karte);color:var(--ink);
  }
  .suche input:focus{outline:2px solid var(--lila-tief);outline-offset:1px;}

  .treffer{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
    background:var(--karte);
    border:1px solid rgba(46,51,44,.18);
    border-radius:12px;
    box-shadow:0 14px 34px rgba(74,84,70,.2);
    overflow:hidden;
    max-height:340px;overflow-y:auto;
  }
  .treffer button{
    display:flex;align-items:center;gap:12px;width:100%;
    background:transparent;border:none;border-bottom:1px solid rgba(46,51,44,.1);
    padding:10px 12px;cursor:pointer;text-align:left;
    font-family:"Karla",sans-serif;
  }
  .treffer button:last-child{border-bottom:none;}
  .treffer button:hover,.treffer button:focus-visible{background:rgba(161,134,201,.14);outline:none;}
  .treffer img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none;}
  .treffer .tt{min-width:0;flex:1;}
  .treffer .tt b{display:block;font-weight:600;font-size:.96rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .treffer .tt span{color:var(--ink-soft);font-size:.85rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

  .such-status{
    font-family:"Caveat",cursive;font-size:1.05rem;
    color:var(--ink-soft);margin:.5em 0 0;min-height:1.3em;
  }

  .manuell{margin-bottom:clamp(24px,5vw,38px);}
  .manuell summary{
    cursor:pointer;list-style:none;
    font-family:"Karla",sans-serif;font-size:.8rem;font-weight:600;
    letter-spacing:.08em;color:var(--ink-soft);
    padding:.5em 0;
  }
  .manuell summary::-webkit-details-marker{display:none;}
  .manuell summary:hover{color:var(--ink);}

  .lied .cover{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;}
  .horen{
    background:transparent;border:1px solid rgba(46,51,44,.2);
    border-radius:50%;width:32px;height:32px;flex:none;
    cursor:pointer;color:var(--ink-soft);font-size:.8rem;
    display:flex;align-items:center;justify-content:center;
    transition:all .18s ease;
  }
  .horen:hover{border-color:var(--gold);color:var(--gold);}
  .horen:focus-visible{outline:2px solid var(--lila-tief);outline-offset:2px;}

  /* ---- Swipebare Polaroid-Galerie ---- */
  .gallery{
    position:relative;
    width:min(340px,78vw);
    margin:clamp(34px,6vw,52px) auto clamp(6px,2vw,14px);
    touch-action:pan-y;
    user-select:none;-webkit-user-select:none;
  }
  .gallery .slide{
    position:absolute;top:0;left:0;width:100%;
    transition:transform .45s cubic-bezier(.2,.8,.3,1), opacity .4s ease;
    will-change:transform;
  }
  .gallery .slide.lead{position:relative;}
  .gallery .slide .polaroid{margin:0;width:100%;transform:none;cursor:grab;}
  .gallery .slide .polaroid:hover{transform:none;}
  .gallery.dragging .slide{transition:none;}
  .gallery.dragging .polaroid{cursor:grabbing;}

  /* Lesbarkeit entsteht über Kontrast und Größe, nicht über Schleier */
  .readable{
    position:relative;
    padding:clamp(10px,2vw,18px) 0 clamp(14px,2.5vw,22px);
    margin-top:clamp(6px,2vw,14px);
  }

  /* ---- Countdown-Zahlen ---- */
  .clock{
    display:flex;justify-content:center;align-items:flex-start;
    gap:clamp(12px,4vw,34px);
    margin-top:clamp(6px,2vw,14px);
  }
  .unit{min-width:clamp(56px,15vw,92px);}
  .num{
    font-family:"Instrument Serif",Georgia,serif;
    font-size:clamp(3.1rem,11.5vw,5.2rem);
    line-height:1;
    font-variant-numeric:tabular-nums;
    color:#1E2419;
  }
  .lab{
    font-family:"Karla",sans-serif;
    font-weight:600;
    font-size:clamp(.7rem,1.9vw,.86rem);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:#362751;
    margin-top:.6em;
  }
  .sep{
    font-family:"Instrument Serif",serif;
    font-size:clamp(1.9rem,6vw,3rem);
    color:#5B4386;
    line-height:1.25;
  }
  .clock.solo .num{font-size:clamp(4.8rem,21vw,9rem);}
  .clock.solo .lab{font-size:clamp(.82rem,2.4vw,1rem);letter-spacing:.34em;}

  .closing{
    font-family:"Caveat",cursive;
    font-size:clamp(1.7rem,5vw,2.4rem);
    color:#33402F;
    margin-top:clamp(18px,3.5vw,28px);
    transform:rotate(-1.2deg);
  }

  /* Einblenden */
  .fade{opacity:0;transform:translateY(14px);animation:fade .95s cubic-bezier(.2,.7,.3,1) forwards;}
  .f1{animation-delay:.15s;} .f2{animation-delay:.45s;}
  .f3{animation-delay:.75s;} .f4{animation-delay:1.05s;}
  @keyframes fade{to{opacity:1;transform:none;}}
  .polaroid.fade{transform:translateY(20px) rotate(-2.6deg);animation:drop 1.1s cubic-bezier(.2,.8,.3,1) .45s forwards;}
  @keyframes drop{to{opacity:1;transform:rotate(-2.6deg);}}

  /* ================= HOMEPAGE ================= */
  #home-view{display:none;}
  #home-view.on{display:block;}

  .home-hero{
    min-height:66dvh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;padding:56px 22px 30px;
  }
  .home-hero .names{font-size:clamp(2.6rem,10vw,5rem);}
  .home-hero .polaroid{width:min(280px,66vw);margin-top:34px;}

  section{padding:clamp(48px,8vw,80px) 22px;}
  .wrap{max-width:640px;margin:0 auto;}

  .sec-title{
    color:var(--pflaume);
    text-align:center;
    font-family:"Instrument Serif",Georgia,serif;
    font-size:clamp(2rem,6vw,2.9rem);
    font-weight:400;
    margin:0 0 clamp(26px,5vw,40px);
  }

  .now-card{
    background:var(--karte);
    border:1px solid rgba(46,51,44,.1);
    padding:clamp(24px,5vw,38px);
    text-align:center;
    margin-bottom:clamp(30px,5vw,46px);
    box-shadow:0 10px 30px rgba(74,84,70,.1);
    transform:rotate(-.5deg);
  }
  .now-card .kicker{
    font-family:"Caveat",cursive;
    font-size:1.5rem;color:var(--lila-mittel);
  }
  .now-title{
    font-family:"Instrument Serif",Georgia,serif;
    font-size:clamp(1.9rem,6vw,2.7rem);
    margin:.12em 0 .2em;line-height:1.1;
  }
  .now-sub{color:var(--ink-soft);font-size:1rem;margin:0;}
  .next-line{
    margin:1.4em 0 0;padding-top:1.1em;
    border-top:1px dashed rgba(46,51,44,.2);
    font-size:.94rem;color:var(--ink-soft);
  }
  .next-line strong{color:var(--ink);font-weight:600;}

  .t-item{
    display:grid;grid-template-columns:76px 1fr;
    gap:clamp(12px,3vw,22px);
    padding:18px 0;
    border-bottom:1px dashed rgba(46,51,44,.18);
    transition:opacity .4s ease;
  }
  .t-item:last-child{border-bottom:none;}
  .t-item.past{opacity:.34;}
  .t-item.live .t-time{color:var(--lila-tief);}
  .t-time{
    font-family:"Instrument Serif",serif;
    font-size:1.25rem;font-variant-numeric:tabular-nums;
  }
  .t-name{
    font-family:"Caveat",cursive;
    font-size:clamp(1.4rem,4vw,1.7rem);
    line-height:1.2;
  }
  .t-desc{color:var(--ink-soft);font-size:.94rem;margin-top:.1em;}

  footer{
    text-align:center;padding:56px 22px 72px;
    border-top:1px dashed rgba(46,51,44,.2);
  }
  footer .mono{
    font-family:"Instrument Serif",serif;font-style:italic;
    font-size:2.4rem;color:var(--lila-mittel);
  }
  footer p{font-family:"Caveat",cursive;font-size:1.3rem;color:var(--ink-soft);margin:.3em 0 0;}

  @media (prefers-reduced-motion:reduce){
    .fade,.polaroid.fade{animation:none;opacity:1;transform:rotate(-2.6deg);}
    .polaroid:hover{transform:rotate(-2.6deg);}
    html{scroll-behavior:auto;}
  }

  /* =========================================================
     ERGAENZUNGEN

     Alles ab hier ist neu hinzugekommen. Am Bestehenden
     darueber wurde nichts veraendert.
     ========================================================= */

  /* ---- Konfetti ----
     Die Schnipsel rieseln gut fuenf Sekunden. Liegt der letzte,
     blendet die Leinwand aus, damit kein Haufen auf der
     Hochzeitsseite liegen bleibt. */
  #konfetti{transition:opacity 1.6s ease;}
  #konfetti.weg{opacity:0;}
  @media (prefers-reduced-motion:reduce){
    #konfetti{transition:none;}
  }

  /* =========================================================
     INHALTE VON DER EINLADUNGSKARTE
     ========================================================= */

  /* ---- Die laengeren Namen ----

     "Vanessa & Juliane" ist deutlich laenger als der bisherige
     Platzhalter. Bei gleicher Schriftgroesse liefe die Zeile auf
     dem Handy ueber den Rand hinaus. Die Groesse ist deshalb so
     gewaehlt, dass die Zeile ungefaehr gleich breit bleibt wie
     vorher, und auf schmalen Bildschirmen stehen die Namen
     untereinander, genau wie auf der Karte. */
  .names{font-size:clamp(2.9rem,9vw,4.8rem);}
  .home-hero .names{font-size:clamp(2.6rem,8vw,4rem);}
  .names .name{white-space:nowrap;}

  /* ---- Schriftgroesse auf dem Handy ----

     Fast alle Groessen auf dieser Seite haengen an rem, also an
     der Grundschrift des Browsers. Ein einziger Wert hier hebt
     deshalb die ganze Seite an, ohne dass an dreissig Stellen
     gedreht werden muss.

     106.25% sind 17 statt 16 Punkt, also rund sechs Prozent
     mehr. Willst du es noch groesser, dreh nur an dieser Zahl:
     112.5% waeren 18 Punkt. Behalt dabei den Countdown im Auge,
     der muss ohne Scrollen auf den Schirm passen. */
  @media (max-width:640px){
    html{font-size:106.25%;}

    .names{
      font-size:clamp(2.8rem,13.4vw,4.2rem);
      line-height:1.0;
    }
    .names .name{display:block;}
    .names .amp{
      display:block;
      font-size:.56em;
      padding:0;
      line-height:1.1;
    }

    /* Die gestapelten Namen und der Spruch brauchen Hoehe, die
       vorher die Uhr hatte. Damit der Countdown auf dem Handy
       ohne Scrollen sichtbar bleibt, ruecken Bild und Abstaende
       hier enger zusammen. */
    #countdown-view{
      padding-top:clamp(18px,4vw,30px);
      padding-bottom:clamp(22px,5vw,38px);
    }
    .motto{margin-top:.5em;}
    .stamp{margin-top:.85em;}
    .gallery{
      width:min(232px,60vw);
      margin-top:clamp(16px,3.5vw,26px);
      margin-bottom:2px;
    }
    .readable{padding-top:4px;}
    .closing{
      font-size:clamp(1.35rem,4.4vw,1.8rem);
      margin-top:clamp(10px,2.5vw,18px);
    }
  }

  /* Kleine Geraete wie das iPhone SE, dort ist es am engsten.
     Hier faellt die Vergroesserung von oben schwaecher aus,
     sonst passt der Countdown nicht mehr auf den Schirm. */
  @media (max-width:640px) and (max-height:720px){
    html{font-size:102%;}
    #countdown-view{padding-top:14px;padding-bottom:18px;}
    .names{font-size:clamp(2.2rem,10.5vw,3rem);}
    .motto{font-size:1rem;margin-top:.35em;}
    .stamp{margin-top:.7em;font-size:.62rem;}
    .gallery{width:min(168px,44vw);margin-top:14px;}
    .clock.solo .num{font-size:clamp(3.4rem,16vw,4.6rem);}
    .clock.solo .lab{font-size:.72rem;letter-spacing:.24em;}
    .closing{font-size:1.25rem;margin-top:8px;}
  }

  /* ---- Der Spruch unter den Namen ---- */
  .motto{
    font-family:"Caveat",cursive;
    font-size:clamp(1.15rem,3.4vw,1.5rem);
    line-height:1.35;
    color:var(--ink-soft);
    max-width:26ch;
    margin:.7em auto 0;
    transform:rotate(-.6deg);
  }

  /* ---- Infobereich ---- */
  .einladungstext{
    text-align:center;
    color:var(--ink-soft);
    line-height:1.75;
    max-width:44ch;
    margin:-.4em auto clamp(30px,5vw,46px);
  }

  .infoblock{
    background:var(--karte);
    border:1px solid rgba(46,51,44,.1);
    padding:clamp(20px,4vw,30px);
    margin-bottom:clamp(16px,3vw,22px);
    box-shadow:0 8px 24px rgba(74,84,70,.08);
    text-align:center;
  }
  .infoblock h3{
    font-family:"Karla",sans-serif;
    font-size:.72rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--lila-tief);
    margin:0 0 .9em;
  }
  .infoblock p{
    margin:0 0 .6em;
    line-height:1.65;
    color:var(--ink);
  }
  .infoblock p:last-child{margin-bottom:0;}

  .adresse{
    font-family:"Instrument Serif",Georgia,serif;
    font-size:clamp(1.2rem,3.6vw,1.45rem);
    line-height:1.45;
  }

  /* Speisen- und Getraenkeliste.
     Kein Aufzaehlungspunkt, stattdessen eine kleine Raute davor,
     damit die Kaesten so ruhig bleiben wie die uebrigen Infos. */
  .speisen{
    list-style:none;
    margin:0;padding:0;
    text-align:center;
  }
  .speisen li{
    position:relative;
    line-height:1.6;
    color:var(--ink);
    padding-top:.7em;
    margin-top:.7em;
    border-top:1px solid rgba(46,51,44,.08);
  }
  .speisen li:first-child{padding-top:0;margin-top:0;border-top:0;}

  /* Klammerzusaetze aus der Karte, etwas leiser gesetzt */
  .speisen .dazu{
    display:block;
    font-size:.86rem;
    color:var(--ink-soft);
    margin-top:.15em;
  }

  .kartenlink{
    display:inline-block;
    font-family:"Karla",sans-serif;
    font-size:.76rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;
    color:var(--ink-soft);
    border:1px solid rgba(46,51,44,.2);
    border-radius:99px;
    padding:.6em 1.2em;
    margin-top:.4em;
    transition:all .2s ease;
  }
  .kartenlink:hover{background:rgba(161,134,201,.14);color:var(--ink);}
  .kartenlink:focus-visible{outline:2px solid var(--lila-tief);outline-offset:2px;}

  .handschrift{
    font-family:"Caveat",cursive;
    font-size:clamp(1.6rem,4.6vw,2.1rem);
    color:#33402F;
    text-align:center;
    margin:clamp(28px,5vw,40px) 0 0;
    transform:rotate(-1.2deg);
  }

  /* Hinweis, wenn JavaScript aus ist */
  .ohne-js{
    margin:0;padding:1.2em 22px;text-align:center;
    background:var(--rose);color:#FBFAFD;
    font-family:"Karla",sans-serif;font-size:.95rem;
  }

  /* Kleinere Zwischenueberschrift, war vorher direkt im HTML */
  .sec-title.klein{font-size:clamp(1.5rem,4.5vw,2.1rem);}

  /* ---- Namensfeld im Hochladebereich ---- */
  .namensfeld{
    display:block;
    max-width:340px;margin:0 auto clamp(16px,3vw,22px);
    text-align:left;
  }
  .namensfeld>span{
    display:block;
    font-family:"Caveat",cursive;
    font-size:1.2rem;color:var(--ink-soft);
    padding-left:.2em;margin-bottom:.15em;
  }
  .namensfeld input{
    width:100%;
    font-family:"Karla",sans-serif;font-size:1rem;
    padding:.75em .95em;border-radius:10px;
    border:1px solid rgba(46,51,44,.22);
    background:var(--karte);color:var(--ink);
  }
  .namensfeld input::placeholder{color:var(--ink-soft);opacity:.75;}
  .namensfeld input:focus{outline:2px solid var(--lila-tief);outline-offset:1px;}

  .knopf[disabled]{opacity:.5;cursor:default;}
  .knopf[disabled]:hover{transform:none;}

  /* ---- Zwei Korrekturen an den Fotokarten ----

     1. figure bringt vom Browser aus 40px Abstand links und
        rechts mit. Im Raster blieben von 151px Spaltenbreite
        dadurch nur 71px fuer die Karte uebrig. Das ist frueher
        nicht aufgefallen, weil ohne Server nie Bilder da waren.

     2. Die Bilder tragen jetzt width und height als Angabe,
        damit beim Laden nichts springt. Der Browser nimmt die
        Hoehe daraufhin woertlich, deshalb hier ausdruecklich
        height:auto. Erst dann greift wieder das gewuenschte
        Seitenverhaeltnis. */
  .top-karte,.foto-karte{margin:0;}
  .top-karte img,.foto-karte img{height:auto;}

  /* ---- Bilder sind antippbar ---- */
  .top-karte img,.foto-karte img{cursor:zoom-in;}

  /* Platzhalter, solange ein Bild noch hochlaedt */
  .foto-karte.wartet{opacity:.5;}
  .foto-karte.wartet img{filter:grayscale(1);}

  /* ---- Loeschknopf, nur in der Verwaltung sichtbar ---- */
  .loeschen{
    background:transparent;border:1px solid rgba(46,51,44,.2);
    border-radius:99px;padding:.28em .7em;
    font-family:"Karla",sans-serif;font-size:.72rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-soft);cursor:pointer;
    transition:all .18s ease;
  }
  .loeschen:hover{border-color:#6E51A2;color:#6E51A2;}
  .loeschen:focus-visible{outline:2px solid var(--lila-tief);outline-offset:2px;}

  .verwaltung-band{
    position:fixed;top:0;left:0;right:0;z-index:70;
    background:#6E51A2;color:#FBFAFD;
    font-family:"Karla",sans-serif;font-size:.74rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;
    text-align:center;padding:.45em 22px;
  }
  body.verwaltet{padding-top:2.1em;}

  /* ---- Kurze Meldung am unteren Rand ---- */
  .melder{
    position:fixed;z-index:80;
    left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);
    max-width:min(420px,calc(100vw - 32px));
    background:var(--ink);color:var(--paper);
    font-family:"Karla",sans-serif;font-size:.9rem;line-height:1.35;
    padding:.85em 1.3em;border-radius:12px;
    box-shadow:0 10px 30px rgba(46,51,44,.3);
    opacity:0;transition:opacity .25s ease,transform .25s ease;
    pointer-events:none;text-align:center;
  }
  .melder[hidden]{display:none;}
  .melder.an{opacity:1;transform:translateX(-50%) translateY(0);}
  .melder.schlimm{background:#57387A;}

  /* Der Testknopf sitzt unten rechts, die Meldung weicht ihm aus */
  /* Ist unten rechts ein Knopf, rutscht die Meldung darueber */
  body.mit-sim .melder,
  body.mit-kurzinfo .melder{bottom:calc(76px + env(safe-area-inset-bottom));}

  /* ---- Dezenter Hinweis ganz unten ---- */
  .visitenkarte{
    margin:2.4em auto 0;
    max-width:34ch;
    font-family:"Karla",sans-serif;
    font-size:.72rem;
    line-height:1.6;
    letter-spacing:.02em;
    color:var(--ink-soft);
    opacity:.62;
  }
  .visitenkarte a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid rgba(46,51,44,.28);
    white-space:nowrap;
  }
  .visitenkarte a:hover{color:var(--lila-tief);border-bottom-color:var(--lila-tief);}

  /* ---- Bild in gross ---- */
  .leuchtkasten{
    position:fixed;inset:0;z-index:90;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(16px,4vw,48px);
    background:rgba(40,46,38,.94);
    opacity:0;transition:opacity .28s ease;
    overscroll-behavior:contain;
  }
  .leuchtkasten[hidden]{display:none;}
  .leuchtkasten.an{opacity:1;}

  .lk-rahmen{
    margin:0;max-width:100%;max-height:100%;
    display:flex;flex-direction:column;align-items:center;gap:.9em;
    touch-action:pan-y;user-select:none;-webkit-user-select:none;
  }
  .lk-rahmen img{
    max-width:100%;
    max-height:calc(100dvh - clamp(120px,22vw,190px));
    object-fit:contain;display:block;
    background:var(--karte);padding:10px;
    box-shadow:0 18px 50px rgba(0,0,0,.5);
    transition:transform .25s ease,opacity .25s ease;
  }
  .lk-rahmen.wischt img{transition:none;}

  .lk-fuss{
    display:flex;align-items:baseline;gap:1em;
    color:var(--paper);
  }
  .lk-von{font-family:"Caveat",cursive;font-size:1.45rem;}
  .lk-zaehler{
    font-family:"Karla",sans-serif;font-size:.74rem;font-weight:600;
    letter-spacing:.18em;opacity:.6;
  }

  .lk-knopf{
    position:absolute;z-index:2;
    background:rgba(251,250,253,.1);
    border:1px solid rgba(251,250,253,.3);
    color:var(--paper);
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;line-height:1;
    transition:background .18s ease,border-color .18s ease;
  }
  .lk-knopf:hover{background:rgba(251,250,253,.22);border-color:rgba(251,250,253,.6);}
  .lk-knopf:focus-visible{outline:2px solid var(--lila-tief);outline-offset:3px;}
  .lk-zu{top:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);font-size:1.05rem;}
  .lk-zurueck,.lk-vor{
    top:50%;transform:translateY(-50%);
    font-family:"Instrument Serif",serif;font-size:2rem;
    padding-bottom:.16em;
  }
  .lk-zurueck{left:clamp(8px,2vw,26px);}
  .lk-vor{right:clamp(8px,2vw,26px);}
  .lk-knopf[hidden]{display:none;}

  /* Auf schmalen Handys stehen die Pfeile im Weg, dort wird gewischt */
  @media (max-width:560px){
    .lk-zurueck,.lk-vor{display:none;}
  }

  @media (prefers-reduced-motion:reduce){
    .leuchtkasten,.lk-rahmen img,.melder{transition:none;}
  }

  /* =========================================================
     SMARTPHONE

     Am Hochzeitstag rufen fast alle die Seite mit dem Handy
     auf. Alles hier drunter gilt nur fuer schmale Bildschirme.
     ========================================================= */

  /* Keine seitliche Verschiebung, egal was passiert */
  html,body{overflow-x:hidden;}

  /* Antippbares nie kleiner als der Daumen. Apple und Google
     nennen beide 44 Bildpunkte als Untergrenze.

     Die Regel haengt bewusst an zwei Bedingungen: an Geraeten
     ohne Mauszeiger und zusaetzlich an schmalen Bildschirmen.
     Nur mit hover:none allein liesse sie sich am Rechner nicht
     nachpruefen, und genau dort faellt so ein Fehler dann
     niemandem auf. */
  @media (hover:none), (max-width:560px){
    .stimme,.horen,.knopf,.home-nav a,.sim-btn,.loeschen,.sim-griff,.ki-griff{
      min-height:44px;
    }
    /* Ohne das rutscht der Text in der hoeher gewordenen
       Schaltflaeche nach oben statt mittig zu sitzen */
    .knopf,.home-nav a,.sim-btn,.loeschen{
      display:inline-flex;align-items:center;justify-content:center;
    }
    .stimme,.loeschen{padding-left:.9em;padding-right:.9em;}
    .horen{width:44px;height:44px;}
    .lk-knopf{width:48px;height:48px;}
    /* Auch das Namensfeld und die Suche gross genug zum Tippen */
    .namensfeld input,.suche input,.wunsch-form input{min-height:46px;}
    /* Unter 16px zoomt iOS beim Antippen ins Feld hinein */
    .namensfeld input,.suche input,.wunsch-form input,.treffer button{font-size:16px;}
  }

  /* Auf Fingergeraeten gibt es kein Schweben, also auch keine
     haengenbleibenden Schwebe-Effekte */
  @media (hover:none){
    .polaroid:hover{transform:rotate(-2.6deg);}
    .knopf:hover{transform:none;}
    .top-karte img,.foto-karte img{cursor:pointer;}
  }

  @media (max-width:560px){

    /* Der iPhone-Ausschnitt und der Balken unten duerfen nichts
       verdecken */
    #countdown-view{
      padding-left:max(18px,env(safe-area-inset-left));
      padding-right:max(18px,env(safe-area-inset-right));
      padding-bottom:max(34px,env(safe-area-inset-bottom));
    }
    section,.home-hero,footer{
      padding-left:max(18px,env(safe-area-inset-left));
      padding-right:max(18px,env(safe-area-inset-right));
    }
    footer{padding-bottom:max(56px,calc(env(safe-area-inset-bottom) + 40px));}

    /* Die grosse Uhr in den letzten 24 Stunden hat vier Felder.
       Nebeneinander wird das auf dem Handy zu eng, deshalb
       Stunden und Minuten oben, Sekunden und Hundertstel unten. */
    .clock.final{
      display:grid;
      grid-template-columns:auto auto auto;
      justify-content:center;
      align-items:start;
      column-gap:5px;
      row-gap:18px;
    }
    .clock.final .unit{min-width:0;}
    .clock.final .num{font-size:clamp(2.2rem,15vw,3.4rem);}
    .clock.final .lab{font-size:.54rem;letter-spacing:.1em;}
    .clock.final .sep{font-size:1.5rem;line-height:1.6;}
    /* Die Uhr hat sieben Teile: Zahl, Doppelpunkt, Zahl, Doppelpunkt,
       Zahl, Doppelpunkt, Zahl. Faellt der mittlere Doppelpunkt weg,
       stehen oben Stunden und Minuten und darunter Sekunden und
       Hundertstel. Gezaehlt wird ueber alle Teile, deshalb
       nth-child und nicht nth-of-type. */
    .clock.final .sep:nth-child(4){display:none;}

    .clock.solo .num{font-size:clamp(4.2rem,26vw,7rem);}

    /* Zwei Bilder je Zeile statt drei sehr schmaler */
    .foto-gitter{
      grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
      gap:10px;
    }

    /* Der Siegertreppchen-Bereich bekommt mehr Luft, damit die
       schraeg gestellten Karten nicht aneinanderstossen */
    .top-liste{gap:22px;}
    .top-karte{transform:rotate(calc(var(--kipp,-1.4deg) * .6));}

    /* Suchtreffer duerfen nicht ueber den Bildschirm hinaus */
    .treffer{max-height:52vh;}

    /* Musikzeile: Rang schmaler, damit fuer den Titel Platz bleibt */
    .lied{gap:10px;}
    .lied .rang{min-width:20px;font-size:1.1rem;}
    .lied .cover{width:40px;height:40px;}
    .lied .titel b{font-size:.96rem;}

    /* Der Ablauf braucht die Uhrzeit nicht so breit */
    .t-item{grid-template-columns:58px 1fr;gap:12px;}

    /* Im Leuchtkasten mehr Platz fuers Bild */
    .leuchtkasten{padding:12px;}
    .lk-rahmen img{
      padding:7px;
      max-height:calc(100dvh - 150px);
    }
    .lk-zu{
      top:max(10px,env(safe-area-inset-top));
      right:10px;
    }

    /* Das Testfenster darf den Daumen nicht behindern */
    .sim-kasten,.ki-kasten{width:calc(100vw - 24px);}
    .sim-gitter{gap:7px;}
    .sim-btn{font-size:.76rem;padding:.75em .5em;}

    .melder{
      left:12px;right:12px;transform:translateY(12px);
      max-width:none;
    }
    .melder.an{transform:translateY(0);}
  }

  /* Sehr schmale Geraete, etwa ein iPhone SE */
  @media (max-width:380px){
    .foto-gitter{grid-template-columns:1fr 1fr;}
    .home-nav{gap:5px;}
    .home-nav a{font-size:.68rem;padding:.5em .8em;}
    .namensfeld{max-width:none;}
  }

  /* Quer gehaltenes Handy: der Countdown darf nicht ueberlaufen */
  @media (max-height:520px) and (orientation:landscape){
    #countdown-view{padding-top:20px;padding-bottom:20px;}
    .gallery{width:min(220px,42vw);margin-top:14px;margin-bottom:4px;}
    .clock.solo .num{font-size:3.4rem;}
    .names{font-size:clamp(2rem,7vw,3rem);}
    .closing{font-size:1.2rem;margin-top:10px;}
  }