/* ================================================================ Eiscafé Mustermann: eigene Gestaltung. Wird NACH stil.css geladen und ueberschreibt nur, was fuer Mustermann anders ist. Farben und Schriften stehen in stil.css (:root, @font-face). Regeln: Verlaeufe immer "in oklab", Zeiten nur ueber --dur-* und --dur-takt, Schatten in Schiefer statt Schwarz, keine Worttrennung. ================================================================ */ :root{ --schiefer:#272F3A; /* Wand hinter der Theke, gemessen (Logo) */ --schiefer-tief:#1E252E; /* Fusszeile, Buehne */ --dunkel-rgb:30,37,46; --gold:#E2BE49; /* Wandschild, gemessen */ --gold-tief:#86670F; /* Gold fuer Schrift auf hellem Grund */ --gold-hover:#D3AC33; --serif:"Playfair Display",Georgia,"Times New Roman",serif; } body{font-family:"Jost",-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:17.5px;background:var(--papier)} h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:-.005em} h2{font-size:clamp(28px,3.6vw,42px)} h3{font-family:var(--serif);font-weight:600;font-size:21px} .vorzeile{color:var(--gold-tief);letter-spacing:.14em;font-weight:600} /* Knoepfe: Gold mit Schiefer-Schrift (7,5:1), rund wie ein Eisloeffel */ .knopf{background:var(--gold);border-color:var(--gold);color:var(--schiefer);border-radius:999px;font-weight:600} .knopf:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--schiefer)} .knopf-klein{border-radius:999px} .knopf-umriss{background:transparent;color:var(--tinte);border-color:var(--tinte)} .knopf-umriss:hover{background:var(--tinte);border-color:var(--tinte);color:#fff} .knopf-umriss-weiss{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)} .knopf-umriss-weiss:hover{background:#fff;color:var(--schiefer);border-color:#fff} /* ---------------------------------------------------------------- Kopfzeile */ .marke img{width:124px;height:auto} .hauptmenue{font-weight:500;letter-spacing:.02em} .hauptmenue a:not(.knopf):hover{color:var(--gold-tief)} /* Kopfzeile schwebt ueber dem Kopfbild (Muster anderen Kundenseiten, Friseure). Der negative Abstand gehoert an den Kopfbereich. */ .kopf-ueber .kinokopf{margin-top:-78px} .kopf-ueber .kopfzeile{background:transparent;border-bottom-color:transparent;backdrop-filter:none; transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)} .marke .logo-weiss{display:none} .kopf-ueber .marke .logo-farbig{display:none} .kopf-ueber .marke .logo-weiss{display:block} .kopf-ueber .hauptmenue a:not(.knopf){color:#fff} .kopf-ueber .burger span{background:#fff} .kopf-ueber.kopf-fest .kopfzeile{background:rgba(251,248,242,.96);backdrop-filter:blur(6px);border-bottom-color:var(--linie)} .kopf-ueber.kopf-fest .marke .logo-farbig{display:block} .kopf-ueber.kopf-fest .marke .logo-weiss{display:none} .kopf-ueber.kopf-fest .hauptmenue a:not(.knopf){color:var(--tinte)} .kopf-ueber.kopf-fest .burger span{background:var(--tinte)} html:not(.js) .kopf-ueber .kinokopf{margin-top:0} html:not(.js) .kopf-ueber .kopfzeile{background:rgba(251,248,242,.96);border-bottom-color:var(--linie)} html:not(.js) .kopf-ueber .marke .logo-farbig{display:block} html:not(.js) .kopf-ueber .marke .logo-weiss{display:none} html:not(.js) .kopf-ueber .hauptmenue a:not(.knopf){color:var(--tinte)} html:not(.js) .kopf-ueber .burger span{background:var(--tinte)} /* ================================================================ Kino-Kopf "Eisreise" (11.09.2026) Torben: "reingezoomt und dann in die Eistheke eintauchen". Bis der Higgsfield-Film da ist, faehrt die Kamera durch drei echte Fotos: vor dem Eingang mit den Vespas, hinein in die Eistheke, Ankunft beim Fruchtbecher mit der Mustermann-Waffel. Laeuft EINMAL (11 Takte) und bleibt auf dem Becher stehen. Grundzustand ist das Schlussbild: ohne JavaScript und bei "Bewegung reduzieren" steht nur der Becher da. Am Rechner steht die Buehne rechts und blendet weich in den Schiefer der Wand, am Handy steht sie ueber dem Text. ================================================================ */ .kinokopf{position:relative;background:var(--papier);padding-bottom:10px} .kk-buehne{position:relative;overflow:hidden;background-color:var(--schiefer-tief); min-height:clamp(640px,92vh,900px);display:flex;align-items:center} .er-szenen{position:absolute;top:0;right:0;bottom:0;width:58%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%); mask-image:linear-gradient(90deg,transparent 0,#000 34%)} .er-szene{position:absolute;inset:0;opacity:0;will-change:transform,opacity} .er-szene picture,.er-szene img{display:block;width:100%;height:100%} .er-szene img{object-fit:cover} .er-szene-1{transform-origin:64% 40%} .er-szene-2{transform-origin:50% 42%} .er-szene-3{transform-origin:50% 48%;opacity:1} .er-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} /* Deckbild der Film-Sicherung (stil.css): erstes Filmbild, liegt ueber dem Film. */ .er-deckbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .er-blende{position:absolute;inset:0;opacity:0;pointer-events:none;background-color:transparent; background-image:radial-gradient(circle at 56% 44% in oklab,rgba(255,248,232,.85),rgba(255,248,232,0) 62%)} .kk-schleier{position:absolute;inset:0;pointer-events:none;background-color:transparent; background-image:linear-gradient(to top in oklab,rgba(var(--dunkel-rgb),.62) 0%,rgba(var(--dunkel-rgb),0) 34%), linear-gradient(to bottom in oklab,rgba(var(--dunkel-rgb),.5) 0%,rgba(var(--dunkel-rgb),0) 22%), linear-gradient(90deg in oklab,rgba(var(--dunkel-rgb),.5) 30%,rgba(var(--dunkel-rgb),0) 62%)} .kk-innen{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:150px} .kk-innen > *{max-width:500px} .kk-innen .vorzeile{color:var(--gold);margin-bottom:18px} .kk-innen h1{font-size:clamp(40px,4.6vw,64px);line-height:1.08;color:#fff;margin-bottom:22px} .kk-innen h1 em{font-style:italic;font-weight:600;color:var(--gold)} .kk-satz{color:#E9E6DE;font-size:clamp(17px,1.35vw,19px)} .kk-innen .knopfreihe{margin-top:28px} .kk-leiste{position:relative;z-index:3;margin-top:-70px;background:#fff;border:1px solid var(--linie); border-radius:18px;box-shadow:0 22px 54px rgba(var(--schatten),.16); display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden} .kk-punkt{display:flex;align-items:center;gap:14px;padding:22px;min-height:104px; border-right:1px solid var(--linie);color:var(--tinte);text-decoration:none; transition:background var(--dur-2) var(--ease-out)} .kk-punkt:last-child{border-right:0} a.kk-punkt:hover{background:var(--akzent-blass)} .kk-punkt .ico{color:var(--gold-tief)} .kk-punkt strong{display:block;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2} .kk-punkt span{display:block;font-size:14.5px;line-height:1.45;color:var(--nebentext)} .g-zeichen{flex:none} /* Bewegung: nur wenn niemand "Bewegung reduzieren" eingestellt hat. */ @media (prefers-reduced-motion:no-preference){ .js .kinokopf .kk-an{opacity:0} .js .er-szene-1{opacity:1} .js .er-szene-3{opacity:0} .js .mit-film .er-szene-1{opacity:0} .kinokopf.laeuft .er-szene-1{animation:er-eins calc(var(--dur-takt) * 11) linear both} .kinokopf.laeuft .er-szene-2{animation:er-zwei calc(var(--dur-takt) * 11) linear both} .kinokopf.laeuft .er-szene-3{animation:er-drei calc(var(--dur-takt) * 11) linear both} .kinokopf.laeuft .er-blende{animation:er-blende calc(var(--dur-takt) * 11) linear both} .kinokopf.mit-film.laeuft .er-szene,.kinokopf.mit-film.laeuft .er-blende{animation:none} .kinokopf.laeuft .kk-an{animation:kk-auf calc(var(--dur-takt) * .85) var(--ease-out) both} .kinokopf.laeuft .kk-1{animation-delay:calc(var(--dur-takt) * .5)} .kinokopf.laeuft .kk-2{animation-delay:calc(var(--dur-takt) * .7)} .kinokopf.laeuft .kk-3{animation-delay:calc(var(--dur-takt) * .95)} .kinokopf.laeuft .kk-4{animation-delay:calc(var(--dur-takt) * 1.15)} .kinokopf.laeuft .kk-5{animation-delay:calc(var(--dur-takt) * 1.4)} } /* Vorwaerts ins Bild (ansteigend schneller), Blende, naechste Szene. */ @keyframes er-eins{ 0%{opacity:1;transform:scale(1.02)} 18%{opacity:1;transform:scale(1.12)} 30%{opacity:1;transform:scale(1.36)} 36%{opacity:0;transform:scale(1.6)} 100%{opacity:0;transform:scale(1.6)}} @keyframes er-zwei{ 0%,28%{opacity:0;transform:scale(1)} 35%{opacity:1;transform:scale(1.06)} 54%{opacity:1;transform:scale(1.2)} 63%{opacity:1;transform:scale(1.42)} 69%{opacity:0;transform:scale(1.64)} 100%{opacity:0;transform:scale(1.64)}} /* Ankunft: der Becher setzt sich ruhig zurecht und bleibt stehen. */ @keyframes er-drei{ 0%,61%{opacity:0;transform:scale(1.22)} 69%{opacity:1;transform:scale(1.14)} 84%{opacity:1;transform:scale(1.04)} 100%{opacity:1;transform:scale(1)}} @keyframes er-blende{ 0%,29%{opacity:0} 33%{opacity:.55} 39%{opacity:0} 62%{opacity:0} 66%{opacity:.55} 72%{opacity:0} 100%{opacity:0}} @keyframes kk-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* ---------------------------------------------------------------- Angebot */ .kachel{border-radius:16px} .kachel:hover{box-shadow:0 12px 30px rgba(var(--schatten),.14);border-color:var(--gold)} .kachel-still:hover{transform:none;box-shadow:none;border-color:var(--linie)} .kachel-still:hover .kachel-bildrahmen img{transform:scale(1.04)} .kachel-bildrahmen{border-radius:15px 15px 0 0} .karte-kopf .ico{color:var(--gold-tief)} /* ---------------------------------------------------------------- Bewertungen */ .bew-karte{border-radius:16px} .bew-karte blockquote{font-size:16.5px} /* ---------------------------------------------------------------- Galerie */ .galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;align-items:stretch} .galerie figure{margin:0;display:flex;flex-direction:column} /* height:auto ist Pflicht: sonst gewinnt das height-Attribut (1250) gegen aspect-ratio und die Bilder werden meterhoch. */ .galerie img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px; box-shadow:0 14px 34px rgba(var(--schatten),.12)} .galerie figcaption{margin-top:14px;text-align:center;font-family:var(--serif);font-style:italic; font-size:21px;color:var(--tinte)} html.anim .galerie figure{opacity:0;transform:translateY(18px); transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)} html.anim .galerie figure.sichtbar{opacity:1;transform:none} /* ---------------------------------------------------------------- Ablauf in Gold */ .ablauf-gold{--glut-a:#F0CF6A;--glut-b:#9A7612} /* ---------------------------------------------------------------- Terrasse */ .piazza-raster{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:stretch} .piazza-bild{position:relative;border-radius:18px;overflow:hidden;min-height:480px} .piazza-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .piazza-text{display:flex;flex-direction:column;justify-content:center} .piazza-text .knopf{align-self:flex-start;margin-top:24px} .piazza-text .hakenliste li{border-bottom-color:var(--linie)} /* ---------------------------------------------------------------- Über uns Gleiches Raster wie die Terrasse, nur gespiegelt (Text links, Film rechts). Standbild und Film liegen deckungsgleich uebereinander, beide mit derselben object-position, sonst springt das Bild beim Filmstart. */ .ueber-raster{grid-template-columns:1.1fr 1fr} .ueber-film img,.ueber-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% 40%} .ueber-zitat{margin:22px 0 0;padding:14px 20px;border-left:3px solid var(--gold-tief);background:#fff} .ueber-zitat p{margin:0;font-style:italic} .ueber-zitat cite{display:block;margin-top:6px;font-size:14px;font-style:normal;color:var(--nebentext)} /* Auf dem Papierton hebt sich der Platzhalter nur mit Linie ab (Regel 9). */ .ueber-raster .platzhalter{margin-top:18px;border:1px dashed var(--gold-tief)} /* Bewegung reduzieren: regelt die Film-Sicherung in stil.css (.film-buehne video). */ /* ---------------------------------------------------------------- Besuch */ .besuch-raster{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:stretch;margin-top:34px} .besuch-kasten{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:28px 30px; display:flex;flex-direction:column} .besuch-kasten .karte-kopf{margin-bottom:4px} .heute-status{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-weight:600} .status-punkt{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none} .ist-offen .status-punkt{background:#3F9C5A} .zeitliste{list-style:none;margin:0 0 18px} .zeitliste li{display:flex;justify-content:space-between;gap:14px;padding:7px 12px;border-radius:8px;font-size:16px} .zeitliste li.heute{background:var(--akzent-blass);font-weight:600;box-shadow:inset 3px 0 0 var(--gold-tief)} .besuch-kasten .knopfreihe{margin-top:6px} .besuch-kasten .platzhalter{margin-top:18px} .zeiten-quelle{font-size:13.5px;color:var(--nebentext);margin:14px 0 0} /* aspect-ratio:auto: das Kartenfeld der Vorlage hat ein festes Verhaeltnis. Zusammen mit der gestreckten Rasterhoehe wurde es dadurch breiter als seine Spalte und schob die Seite seitlich auf 1995 Pixel. */ .besuch-karte{margin-top:0;min-height:480px;height:auto;aspect-ratio:auto} .besuch-karte iframe{position:absolute;inset:0} /* ---------------------------------------------------------------- Schluss und Fuss */ .abschnitt-schiefer{position:relative;background-color:var(--schiefer);color:#fff; background-image:radial-gradient(ellipse 60% 80% at 50% 120% in oklab,rgba(226,190,73,.2),rgba(226,190,73,0) 70%)} .abschnitt-schiefer.kante{border-top:5px solid var(--gold)} .abschnitt-schiefer .innen{position:relative;z-index:1} .abschnitt-schiefer h2,.abschnitt-schiefer p{color:#fff} .abschnitt-schiefer .vorzeile{color:var(--gold)} .abschnitt-schiefer .breit-text{color:#DAD6CC;margin-left:auto;margin-right:auto} .abschnitt-schiefer .knopfreihe{justify-content:center} .fusszeile{background:var(--schiefer-tief)} .fusszeile p,.fusszeile a{color:#D9D4C8} .fusszeile a:hover{color:var(--gold)} .fusszeile h3{color:var(--gold);font-family:"Jost",sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em} .fuss-logo{width:170px} .fuss-zeit{display:flex;justify-content:space-between;gap:14px;max-width:260px;margin:0 0 4px} .fuss-unten{border-top:1px solid rgba(255,255,255,.14);color:#A9A69E} /* ---------------------------------------------------------------- Breiten */ @media (max-width:1000px){ .galerie{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .kopf-ueber .hauptmenue a:not(.knopf){color:var(--tinte)} .kk-innen > *{max-width:46%} .kk-leiste{grid-template-columns:repeat(2,1fr);margin-top:-56px} .kk-punkt{border-bottom:1px solid var(--linie)} .kk-punkt:nth-child(2n){border-right:0} .kk-punkt:nth-child(n+3){border-bottom:0} .piazza-raster{grid-template-columns:1fr;gap:36px} .piazza-bild{min-height:0;aspect-ratio:4/3} .piazza-bild.ueber-film{aspect-ratio:1/1} .besuch-raster{grid-template-columns:1fr} .besuch-karte{min-height:360px} } @media (max-width:720px){ .kk-buehne{flex-direction:column;align-items:stretch;min-height:0} .er-szenen{position:relative;width:100%;aspect-ratio:4/5; -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%); mask-image:linear-gradient(to bottom,#000 68%,transparent 100%)} .kk-schleier{background-image:linear-gradient(to bottom in oklab,rgba(var(--dunkel-rgb),.55) 0%,rgba(var(--dunkel-rgb),0) 18%)} .kk-innen{margin-top:-96px;padding-top:0;padding-bottom:96px} .kk-innen > *{max-width:none} } @media (max-width:600px){ .kk-leiste{grid-template-columns:1fr;margin-top:-50px} .kk-punkt{min-height:0;padding:18px 20px;border-right:0} .kk-punkt:nth-child(n+3){border-bottom:1px solid var(--linie)} .kk-punkt:last-child{border-bottom:0} .galerie{gap:12px} .galerie figcaption{font-size:18px} .besuch-kasten{padding:22px} } /* ---------------------------------------------------------------- Eisreise-Film (11.09.2026) Der Higgsfield-Film liegt ueber der Fotofahrt, darueber sein Deckbild (Film-Sicherung, siehe stil.css). Bei "Bewegung reduzieren" bleiben Film und Deckbild weg, dann steht das Becher-Foto. Laeuft der Film nicht (Safari ohne Autoplay), bleibt das Deckbild und der Knopf erscheint. */ @media (prefers-reduced-motion:reduce){ .er-film,.er-deckbild{display:none} } /* ================================================================ Portfolio und Anfrage (11.09.2026, Sitzung mustermann-eisbar-f6) Marco (ueber Torben): das ganze Angebot zeigen, also Eiscafe, Location, mobile Eisbar und den neuen Alleskoenner-Wagen, dazu eine Angebotsanfrage mit Bausteinen (Eis, Pizza, Gluehwein ...), Personen, Datum, von bis. Die Reihen mit Bild und Text nutzen das Raster der Terrasse (.piazza-raster / .ueber-raster), hier steht nur, was neu ist. ================================================================ */ /* Vier Wege zu Mustermann: 4 Karten, am Tablet 2, am Handy 1 (geht immer auf). Knopfzeile per margin-top:auto, damit sie in allen Karten auf einer Linie sitzt. */ .pf-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;align-items:stretch} .pf-karte{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie); border-radius:16px;overflow:hidden;color:var(--tinte);text-decoration:none; transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)} .pf-karte:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(var(--schatten),.14);border-color:var(--gold)} .pf-bild{display:block;aspect-ratio:4/5;overflow:hidden;background-color:var(--schiefer)} .pf-bild img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease-out)} .pf-karte:hover .pf-bild img{transform:scale(1.05)} /* 30px oben: ein Bild klebt nie auf der Ueberschrift (pruefe-bildabstand, mind. 34px Luft) */ .pf-text{display:flex;flex-direction:column;flex:1;padding:32px 22px 22px} .pf-text p{color:var(--nebentext);font-size:15.5px;margin:0 0 16px} .pf-text .weiter{margin-top:auto;color:var(--gold-tief)} .pf-marke{position:absolute;top:14px;left:14px;z-index:1;background:var(--gold);color:var(--schiefer);font-weight:700; font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px} html.anim .pf-karte{opacity:0;transform:translateY(18px)} html.anim .pf-karte.sichtbar{opacity:1;transform:none} html.anim .pf-karte.sichtbar:hover{transform:translateY(-3px)} /* Festbereich: Location, mobile Eisbar, Alleskoenner. Bildflaeche streckt sich auf die Hoehe der Textspalte (Regel "nebeneinander gleich hoch"). */ .feier-text .knopfreihe{margin-top:24px} .feier-text .knopfreihe .knopf{margin-top:0} .feier-text .platzhalter{margin-top:18px;border:1px dashed var(--gold-tief)} .piazza-bild .pf-marke{top:18px;left:18px} .baustein-reihe{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:0} .baustein-reihe li{display:flex;align-items:center;gap:9px;padding:8px 16px 8px 12px;border-radius:999px; border:1px solid var(--linie);background:#fff;font-weight:500;font-size:16px} .baustein-reihe .ico{color:var(--gold-tief)} /* Der Alleskoenner steht auf Schiefer (Hausfarbe der Wand), oben die Kante aus weiche_uebergaenge(), unten dieselbe Kante zurueck ins Helle. */ .abschnitt-schiefer.wagen{border-bottom:5px solid var(--gold)} .wagen .piazza-text p{color:#DAD6CC} .wagen .piazza-text h2{color:#fff} .wagen .baustein-reihe li{background:rgba(255,255,255,.06);border-color:rgba(226,190,73,.6);color:#fff} .wagen .baustein-reihe .ico{color:var(--gold)} .wagen .platzhalter{background:rgba(255,255,255,.06);border:1px dashed var(--gold)} .wagen .platzhalter p{color:#fff} /* Anfrage: links der Baukasten (weisser Kasten mit Linie, Regel 9), rechts der Zettel in Schiefer, der sich beim Ausfuellen fuellt. Beide Spalten gleich hoch; nur der Inhalt des Zettels bleibt beim Scrollen stehen (sticky), der Kasten selbst reicht bis unten. */ .af-raster{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:stretch;margin-top:34px} .af-kasten{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:30px 32px;min-width:0} .af-schritt{border:0;margin:0;padding:0 0 26px;min-width:0} .af-schritt + .af-schritt{border-top:1px solid var(--linie);padding-top:24px} .af-schritt legend{float:left;width:100%;padding:0;margin:0 0 14px} .af-schritt legend + *{clear:both} .af-titel{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;font-size:21px;color:var(--tinte)} .af-nr{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none; background:var(--gold-tief);color:#fff;font-family:"Jost",sans-serif;font-size:16px;font-weight:600} .af-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .af-wahl-2{grid-template-columns:repeat(2,1fr)} .af-chip{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 12px 10px 14px; border:1.5px solid #BDB4A0;border-radius:12px;background:#fff;cursor:pointer;font-weight:500;line-height:1.25; transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)} .af-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .af-chip .ico{color:var(--gold-tief);flex:none} .af-chip:hover{border-color:var(--gold-tief)} .af-chip::after{content:"";margin-left:auto;width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid #BDB4A0; background-position:center;background-repeat:no-repeat;background-size:12px} .af-chip:has(input:checked){border-color:var(--gold-tief);background-color:var(--akzent-blass);box-shadow:inset 0 0 0 1px var(--gold-tief)} .af-chip:has(input:checked)::after{background-color:var(--gold-tief);border-color:var(--gold-tief); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E")} .af-chip:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px} .af-ort{align-items:flex-start;min-height:92px;padding:14px 14px 14px 16px} .af-ort .ico{margin-top:2px} .af-ort strong{display:block;font-weight:600} .af-ort small{display:block;margin-top:2px;color:var(--nebentext);font-size:14.5px;font-weight:400} /* Felder, die nur bei Bedarf erscheinen (ohne JavaScript, per :has) */ /* .af-kasten davor: .af-feld weiter unten setzt display:flex und wuerde sonst gewinnen */ .af-kasten .af-wenn{display:none;margin-top:12px} .af-kasten:has(#af-b-anderes:checked) .af-wenn-anderes, .af-kasten:has(#af-ort-ihnen:checked) .af-wenn-ort{display:flex} .af-kasten:has(#af-mehrtaegig:checked) .af-wenn-tage{display:flex} .af-feld{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:15.5px;min-width:0} .af-feld input,.af-feld textarea{font:inherit;font-weight:400;font-size:16px;line-height:1.4;padding:12px 14px;min-height:50px; width:100%;min-width:0;border:1.5px solid #BDB4A0;border-radius:10px;background:#fff;color:var(--tinte);-webkit-appearance:none;appearance:none} .af-feld input::-webkit-date-and-time-value{text-align:left} .af-feld input:focus,.af-feld textarea:focus{outline:none;border-color:var(--gold-tief);box-shadow:0 0 0 3px rgba(226,190,73,.4)} .af-feld .optional{font-weight:400;color:var(--nebentext)} .af-reihe{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px} .af-reihe-2{grid-template-columns:1fr 1fr} .af-reihe + .af-reihe,.af-reihe + .af-feld,.af-feld + .af-feld{margin-top:12px} /* In einer Reihe beginnen alle Felder auf derselben Linie */ .af-reihe > .af-feld{margin-top:0} .af-haken{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15.5px;cursor:pointer} .af-haken input{width:20px;height:20px;accent-color:var(--gold-tief);margin:0;flex:none} /* Personen: Regler und Zahl laufen gemeinsam */ .af-personen{display:grid;grid-template-columns:1fr 120px;gap:18px;align-items:center;margin-bottom:14px} .af-personen .af-feld input{font-family:var(--serif);font-size:26px;font-weight:700;text-align:center;padding:6px 8px} .af-regler{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;margin:0;cursor:pointer; background-color:#E4DDCC;background-image:linear-gradient(90deg in oklab,var(--gold-tief) 0 var(--p,20%),#E4DDCC var(--p,20%) 100%)} .af-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%; background:var(--gold);border:3px solid #fff;box-shadow:0 2px 8px rgba(var(--schatten),.35)} .af-regler::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gold);border:3px solid #fff; box-shadow:0 2px 8px rgba(var(--schatten),.35)} .af-regler-text{display:flex;justify-content:space-between;font-size:13.5px;color:var(--nebentext);margin-top:6px} .af-unter{margin:20px 0 10px;font-weight:600;font-size:15.5px} .af-fehler{margin:12px 0 0;color:#A3261B;font-weight:600;font-size:15px} /* Beim Hinspringen nicht unter der schwebenden Kopfzeile verschwinden */ #anfrage-form,.af-schritt{scroll-margin-top:100px} .af-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Zettel */ /* .grain (Koernung gegen Streifen, Regel 2) legt eine Schicht darueber, deshalb hebt z-index den Inhalt nach vorn. Die Kante in Schiefer-Tief macht den Kasten auch fuer den Pruefer messbar (Regel 9). */ .af-zettel{position:relative;border-radius:18px;padding:30px 28px;color:#fff;background-color:var(--schiefer); border:1px solid var(--schiefer-tief); background-image:radial-gradient(ellipse 90% 50% at 50% 105% in oklab,rgba(226,190,73,.2),rgba(226,190,73,0) 70%)} .af-zettel-innen{position:sticky;top:104px;z-index:2} .af-zettel .vorzeile{color:var(--gold);margin:0} .af-zettel h3{color:#fff;font-size:27px;margin:4px 0 0} .af-liste{list-style:none;margin:16px 0 0;padding:0} .af-liste li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)} .af-liste .ico{color:var(--gold);margin-top:3px} .af-liste span{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9B4A8} .af-liste strong{display:block;font-weight:500;font-size:16.5px;color:#fff} .af-liste li.offen strong{font-weight:400;font-style:italic;color:#A8A398} .af-kugeln{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;margin-top:16px} .af-kugel{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--schiefer); box-shadow:0 4px 12px rgba(var(--schatten),.4);animation:af-pop var(--dur-2) var(--ease-pop,var(--ease-out)) both} @keyframes af-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}} .af-zettel .knopf{width:100%;justify-content:center;margin-top:22px} .af-zettel .af-hinweis{font-size:13.5px;color:#B9B4A8;margin:12px 0 0} /* Nach dem Absenden: Danke-Ansicht statt Schritten */ .af-danke{display:none} .af-raster.gesendet .af-schritt,.af-raster.gesendet .af-senden{display:none} .af-raster.gesendet .af-danke{display:block} .af-danke .karte-kopf .ico{color:#3F9C5A} .af-danke pre{margin:16px 0 20px;padding:18px 20px;white-space:pre-wrap;font-family:inherit;font-size:15.5px;line-height:1.6; background:var(--akzent-blass);border:1px solid var(--linie);border-radius:12px} .af-danke .platzhalter{margin:0;border:1px dashed var(--gold-tief)} @media (prefers-reduced-motion:reduce){.af-kugel{animation:none}} /* Knoepfe als