:root{
    --paper:#EFE6D9;
    --paper-deep:#E3D5C2;
    --ink:#332F2A;
    --ink-soft:#7A7066;
    --rose:#BE8A80;
    --sage:#8D9B81;
    --gold:#B4914F;
    --tape:rgba(190,138,128,.28);
  }

  *{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(90,72,55,.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(--rose);
    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(--rose);
    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(51,47,42,.22);
    border-bottom:1px solid rgba(51,47,42,.22);
    padding:.55em .2em;
  }

  /* ---- Polaroid ---- */
  .polaroid{
    position:relative;
    width:min(340px,78vw);
    margin:clamp(34px,6vw,52px) auto clamp(26px,5vw,40px);
    background:#FDFBF6;
    padding:14px 14px 0;
    border-radius:2px;
    transform:rotate(-2.6deg);
    box-shadow:
      0 1px 2px rgba(51,47,42,.14),
      0 18px 38px rgba(85,65,48,.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;
    filter:sepia(.2) saturate(.94) contrast(1.03) brightness(1.02);
  }
  /* Warmer Foto-Schleier, typisch Sofortbild */
  .polaroid .shot::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(200deg,rgba(255,214,160,.16),transparent 46%),
      radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(70,52,38,.24) 100%);
    mix-blend-mode:multiply;
  }

  .polaroid .caption{
    font-family:"Caveat",cursive;
    font-size:clamp(1.35rem,4vw,1.7rem);
    color:#4A423A;
    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(51,47,42,.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));
  }

  .petal-outer{fill:#E0A93F;}
  .petal-inner{fill:#C98A2E;}
  .disc{fill:#6E4A2C;}
  .disc-in{fill:#54371F;}
  .seed{fill:#8A6039;opacity:.75;}
  .stem{fill:none;stroke:#7E8F6B;stroke-width:9;stroke-linecap:round;}
  .stem-hi{fill:none;stroke:#93A57C;stroke-width:3.4;stroke-linecap:round;}
  .leaf{fill:#88996F;}
  .leaf-2{fill:#78895F;}
  .vein{stroke:#5F6E4B;stroke-width:1.2;fill:none;opacity:.55;}
  .sepal{fill:#7E8F6B;}

  /* Gelber Grund, schließt am Ende die letzten Lücken */
  #wash{
    position:absolute;inset:0;
    background:#D9A03A;
    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(239,230,217,.95) 0%,
      rgba(239,230,217,.78) 42%,
      rgba(239,230,217,.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(253,251,246,.94);
    border:1px solid rgba(51,47,42,.18);
    box-shadow:0 6px 18px rgba(85,65,48,.24);
    backdrop-filter:blur(6px);
    color:#E0A93F;
    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(85,65,48,.32);}
  .sim-griff:focus-visible{outline:2px solid var(--rose);outline-offset:3px;}
  .sim-griff[aria-expanded="true"]{transform:rotate(135deg);}

  .sim-kasten{
    width:min(300px,calc(100vw - 28px));
    background:rgba(253,251,246,.96);
    border:1px solid rgba(51,47,42,.16);
    border-radius:16px;
    padding:14px 14px 12px;
    box-shadow:0 12px 34px rgba(85,65,48,.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,#8D9B81,#E0A93F);
    cursor:pointer;
  }
  .sim-range::-webkit-slider-thumb{
    -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:#FDFBF6;border:2px solid #B4914F;cursor:grab;
    box-shadow:0 2px 6px rgba(85,65,48,.3);
  }
  .sim-range::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;
    background:#FDFBF6;border:2px solid #B4914F;cursor:grab;
  }
  .sim-range:focus-visible{outline:2px solid var(--rose);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(51,47,42,.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(190,138,128,.14);color:var(--ink);}
  .sim-btn:focus-visible{outline:2px solid var(--rose);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:#4A423A;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(180,145,79,.45);
    border-bottom:1px solid rgba(180,145,79,.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:#F7EFE3;
  }
  body.feier #home-view{
    background:
      radial-gradient(ellipse 90% 50% at 50% 0%, rgba(224,169,63,.16), transparent 62%),
      radial-gradient(ellipse 70% 40% at 50% 100%, rgba(190,138,128,.14), transparent 70%);
  }
  body.feier .home-hero .names{
    background:linear-gradient(100deg,#B4914F 0%,#8C5F4C 48%,#B4914F 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  body.feier .sec-title{color:#6B4A38;}
  body.feier .now-card{
    border:1px solid rgba(180,145,79,.5);
    box-shadow:0 12px 34px rgba(140,95,76,.16);
  }

  /* Wimpelkette */
  .wimpel{
    display:block;width:100%;height:clamp(46px,7vw,74px);
    margin-bottom:clamp(10px,2vw,18px);
  }
  .wimpel .schnur{fill:none;stroke:#B4914F;stroke-width:1.6;}
  .wimpel .fahne-a{fill:#E0A93F;}
  .wimpel .fahne-b{fill:#BE8A80;}
  .wimpel .fahne-c{fill:#8D9B81;}
  .wimpel .fahne-d{fill:#FDFBF6;stroke:#B4914F;stroke-width:1;}

  /* Goldene Zierlinie */
  .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:#B4914F;stroke-width:1;}
  .zierlinie circle{fill:#B4914F;}

  /* ================= 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(51,47,42,.18);border-radius:99px;
    padding:.5em 1.1em;transition:all .2s ease;
  }
  .home-nav a:hover{background:rgba(190,138,128,.14);color:var(--ink);}

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

  /* Hochladen */
  .upload{
    border:1.5px dashed var(--rose);
    border-radius:14px;
    padding:clamp(22px,5vw,34px);
    text-align:center;
    background:rgba(253,251,246,.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(--rose);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:#FDFBF6;
    padding:12px 12px 0;
    box-shadow:0 12px 34px rgba(85,65,48,.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:#FFF9EC;
    font-family:"Instrument Serif",serif;font-size:1.4rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(85,65,48,.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:#4A423A;}

  /* Restliche Bilder */
  .foto-gitter{
    display:grid;gap:12px;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
  .foto-karte{
    background:#FDFBF6;padding:8px 8px 0;
    box-shadow:0 6px 18px rgba(85,65,48,.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:#4A423A;}

  /* Herz-Knopf */
  .stimme{
    display:inline-flex;align-items:center;gap:.4em;
    background:transparent;border:1px solid rgba(51,47,42,.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(--rose);color:var(--rose);}
  .stimme[aria-pressed=true]{background:var(--rose);border-color:var(--rose);color:#FFF6F2;}
  .stimme:focus-visible{outline:2px solid var(--rose);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(51,47,42,.2);
    background:#FDFBF6;color:var(--ink);
  }
  .wunsch-form input:focus{outline:2px solid var(--rose);outline-offset:1px;}

  .lied{
    display:flex;align-items:center;gap:14px;
    padding:14px 4px;
    border-bottom:1px dashed rgba(51,47,42,.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(224,169,63,.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(51,47,42,.22);
    background:#FDFBF6;color:var(--ink);
  }
  .suche input:focus{outline:2px solid var(--rose);outline-offset:1px;}

  .treffer{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
    background:#FDFBF6;
    border:1px solid rgba(51,47,42,.18);
    border-radius:12px;
    box-shadow:0 14px 34px rgba(85,65,48,.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(51,47,42,.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(190,138,128,.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(51,47,42,.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(--rose);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:#22190F;
  }
  .lab{
    font-family:"Karla",sans-serif;
    font-weight:600;
    font-size:clamp(.7rem,1.9vw,.86rem);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:#4A3826;
    margin-top:.6em;
  }
  .sep{
    font-family:"Instrument Serif",serif;
    font-size:clamp(1.9rem,6vw,3rem);
    color:#8A6A2E;
    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:#3A2B1A;
    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{
    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:#FDFBF6;
    border:1px solid rgba(51,47,42,.1);
    padding:clamp(24px,5vw,38px);
    text-align:center;
    margin-bottom:clamp(30px,5vw,46px);
    box-shadow:0 10px 30px rgba(85,65,48,.1);
    transform:rotate(-.5deg);
  }
  .now-card .kicker{
    font-family:"Caveat",cursive;
    font-size:1.5rem;color:var(--rose);
  }
  .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(51,47,42,.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(51,47,42,.18);
    transition:opacity .4s ease;
  }
  .t-item:last-child{border-bottom:none;}
  .t-item.past{opacity:.34;}
  .t-item.live .t-time{color:var(--rose);}
  .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(51,47,42,.2);
  }
  footer .mono{
    font-family:"Instrument Serif",serif;font-style:italic;
    font-size:2.4rem;color:var(--rose);
  }
  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;}

  @media (max-width:640px){
    .names{
      font-size:clamp(2.8rem,13vw,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 */
  @media (max-width:640px) and (max-height:720px){
    #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:#FDFBF6;
    border:1px solid rgba(51,47,42,.1);
    padding:clamp(20px,4vw,30px);
    margin-bottom:clamp(16px,3vw,22px);
    box-shadow:0 8px 24px rgba(85,65,48,.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(--rose);
    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;
  }

  .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(51,47,42,.2);
    border-radius:99px;
    padding:.6em 1.2em;
    margin-top:.4em;
    transition:all .2s ease;
  }
  .kartenlink:hover{background:rgba(190,138,128,.14);color:var(--ink);}
  .kartenlink:focus-visible{outline:2px solid var(--rose);outline-offset:2px;}

  .handschrift{
    font-family:"Caveat",cursive;
    font-size:clamp(1.6rem,4.6vw,2.1rem);
    color:#3A2B1A;
    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:#FFF6F2;
    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(51,47,42,.22);
    background:#FDFBF6;color:var(--ink);
  }
  .namensfeld input::placeholder{color:var(--ink-soft);opacity:.75;}
  .namensfeld input:focus{outline:2px solid var(--rose);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(51,47,42,.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:#A85B4B;color:#A85B4B;}
  .loeschen:focus-visible{outline:2px solid var(--rose);outline-offset:2px;}

  .verwaltung-band{
    position:fixed;top:0;left:0;right:0;z-index:70;
    background:#A85B4B;color:#FFF6F2;
    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(51,47,42,.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:#8C3F31;}

  /* Der Testknopf sitzt unten rechts, die Meldung weicht ihm aus */
  body.mit-sim .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(51,47,42,.28);
    white-space:nowrap;
  }
  .visitenkarte a:hover{color:var(--rose);border-bottom-color:var(--rose);}

  /* ---- 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(34,25,15,.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:#FDFBF6;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(253,251,246,.1);
    border:1px solid rgba(253,251,246,.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(253,251,246,.22);border-color:rgba(253,251,246,.6);}
  .lk-knopf:focus-visible{outline:2px solid var(--rose);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{
      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{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;}
  }