/* (520) 11.10.2026 - Startseite / und Sortiment /sortiment/. Grosse Bilder bis zum Rand, Bewegung nur beim Ueberfahren.
   Palette wie die Wortmarke (Blau) und der Katalog (Creme); Schrift Jost aus /schriften/. */
/* Farben kommen aus /stil.css (die EINE Stelle, (420)); hier nur Masse und die Schrift. */
body.start{--schrift:"Jost","DM Sans","Avenir Next","Helvetica Neue",Arial,sans-serif;--rand:clamp(16px,4vw,40px);--schatten-hoch:0 18px 36px rgba(47,47,48,.16)}
/* stil.css gestaltet header und footer fuer den Katalog - hier gelten eigene */
header.kopf{display:block;max-width:none;margin:0;padding:0;gap:0}
footer.fuss{max-width:none;margin:0;font-size:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.start{overflow-x:clip;margin:0;background:var(--creme);color:var(--ink);font:400 17px/1.55 var(--schrift);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--schrift);text-wrap:balance;margin:0;font-weight:400;letter-spacing:-.01em;line-height:1.14;color:#5A4F49}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--rand)}
.eyebrow:empty{display:none}
.eyebrow{font:600 12px/1 var(--schrift);letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.3em;border-radius:999px;font:500 16px/1 var(--schrift);text-decoration:none;border:1.5px solid var(--ink);background:var(--papier);color:var(--ink);transition:transform .3s var(--kurve),box-shadow .3s var(--kurve)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
.btn.voll{background:var(--akzent);border-color:var(--akzent);color:#fff;font-weight:700}
.btn.voll:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
a:focus-visible,button:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--creme) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--sand)}
.kopf .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.kopf .marke-klein img{height:20px;width:auto}
.kopf nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.kopf nav a{text-decoration:none;color:var(--grey)}
.kopf nav a:hover{color:var(--ink)}
.kopf .btn{padding:.55em 1em;font-size:14px}
.kopf nav a,.kopf .btn{white-space:nowrap}
@media (max-width:860px){.kopf .btn{margin-left:0}.kopf .wrap{gap:14px}}
@media (max-width:520px){.kopf .wrap{gap:10px}.kopf nav{margin-left:auto;font-size:14px}.kopf .btn{padding:.5em .85em;font-size:13px}.kopf .marke-klein img{height:17px}}
/* Motivkarte: die Studiofotos tragen unten einen Hinweis im Bild - der Rahmen schneidet ihn ab */
.motiv{position:relative;border-radius:8px;overflow:hidden;background:var(--sand);aspect-ratio:1;transition:transform .35s var(--kurve),box-shadow .35s var(--kurve)}
.motiv img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Motivwand */
.wand{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:8px;background:var(--papier);overflow:hidden}
.wand .motiv{border-radius:4px}
.wand .motiv:hover{z-index:3;transform:translateY(-4px)}
/* 12.10.2026, Manuel: "Sammeln. Verschenken. Behalten. ist zu hart optisch, entschaerfe das" - kleiner, weicheres Braun, leichte Luft zwischen den Buchstaben und ein cremiger Schein, damit die Blumen dahinter nicht in die Schrift schneiden */
.claim{font:300 clamp(26px,3.3vw,40px)/1.2 var(--schrift);letter-spacing:.01em;color:#7A6B62;text-shadow:0 0 14px var(--creme),0 0 28px var(--creme),0 0 40px var(--creme)}
.tafel-text{color:var(--grey);font-size:clamp(16px,1.5vw,18px);max-width:30em}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media (max-width:760px){.wand{grid-template-columns:repeat(4,1fr)}}
.herkunft{border-block:1px solid var(--sand)}
.herkunft{margin-top:0}
.herkunft .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;padding-block:30px;font-size:16px;color:var(--grey)}
.herkunft span{padding-inline:20px;position:relative;display:inline-flex;align-items:center;gap:10px}
.herkunft .t{font-style:normal}
.herkunft .ic{width:24px;height:24px;flex:0 0 auto;color:var(--akzent)}
.herkunft span+span:before{content:"";position:absolute;left:0;top:15%;height:70%;border-left:1px solid var(--sand)}
@media (max-width:760px){.herkunft .wrap{flex-direction:column;align-items:center;padding-block:22px}.herkunft span+span:before{display:none}}
.familie{padding-block:clamp(48px,6vw,80px);text-align:center}
.familie .kapitelkopf{margin:0 auto;justify-items:center}
.familie .kapitelkopf p{color:var(--ink)}
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--grey);font-size:18px}
/* 13.10.2026, Manuel: kein Spiegelstrich, keine Unterstreichung - je Punkt ein Zeichen in Logo-Blau, das Hauptwort nur kraeftiger */
.punkte li{display:flex;align-items:flex-start;gap:12px}
.punkte .ic{width:24px;height:24px;flex:0 0 auto;margin-top:1px;color:var(--logo-blau)}
/* 16.10.2026, Olivia: rotes Herz bei Lieblingsmomente (gefuellt), Haus bei Lieblingsorte bleibt Linie */
.punkte .ic.rot{color:#D7372F;fill:currentColor}
.punkte b{font-weight:600;color:var(--ink)}
.herkunft b{font-weight:500;color:var(--ink)}
section{padding-block:clamp(56px,8vw,104px)}
.kapitelkopf{display:grid;gap:12px;max-width:44em;margin-bottom:34px}
.kapitelkopf h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.015em}
.kapitelkopf p{color:var(--grey);font-size:18px}
/* Karussells */
.welt{margin-top:44px}
.welt-kopf{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.welt-kopf .klein{font:600 12px/1 var(--schrift);letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.welt-kopf h3{font-size:clamp(28px,3.4vw,40px);margin-top:6px}
.welt-kopf .rechts{display:flex;gap:10px;align-items:center}
.alle{font-weight:500;color:var(--akzent);text-decoration:none;white-space:nowrap}
.pfeil{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:var(--papier);cursor:pointer;font:400 22px/1 var(--schrift);color:var(--ink);display:grid;place-items:center;transition:transform .25s var(--kurve)}
.pfeil:hover{transform:scale(1.06)}
.band{--innen:max(var(--rand),calc(50vw - 590px + var(--rand)));display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,31vw,420px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--innen);padding-inline:var(--innen);padding-block:8px 18px;scrollbar-width:none;margin-inline:calc(50% - 50vw)}
.band::-webkit-scrollbar{display:none}
.band.schleife{scroll-snap-type:none}
.welt.schleife{position:relative}
.welt.schleife .welt-kopf .pfeil{display:none}
.schiene{position:absolute;z-index:5;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:var(--papier);color:var(--akzent);box-shadow:0 6px 18px rgba(47,47,48,.22);font:400 28px/1 var(--schrift);cursor:pointer;display:grid;place-items:center;padding:0 0 3px;transition:background .25s,color .25s,transform .25s var(--kurve)}
.schiene:hover{background:var(--akzent);color:#fff;transform:translateY(-50%) scale(1.07)}
.schiene.links{left:max(12px,calc(50vw - 590px))}
.schiene.rechts{right:max(12px,calc(50vw - 590px))}
@media (max-width:760px){.schiene{width:40px;height:40px;font-size:24px}.schiene.links{left:8px}.schiene.rechts{right:8px}.welt.schleife .welt-kopf .pfeil{display:none}}
.band>*{scroll-snap-align:start}
.band .karte{margin:0;display:grid;gap:10px;align-content:start;text-decoration:none}
.band .karte .motiv,.moment .bild{aspect-ratio:2/3;background:var(--sand)}   /* alle gleich hoch; 2:3 ist das Format der meisten Szenenbilder */
.band .karte .motiv img,.moment .bild img{width:100%;height:100%;display:block;object-fit:cover}
.band .karte .motiv img.passt-nicht,.moment .bild img.passt-nicht{object-fit:contain}   /* anderes Format: ganz zeigen statt anschneiden (start.js setzt die Klasse) */   /* Manuel 12.10.: Produkt nie abschneiden - die Karte nimmt das Seitenverhaeltnis des Bildes */
.band .karte:hover .motiv{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.band .karte span.z{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.band .karte span.z i{font-style:normal;color:var(--grey)}
.auftakt{position:relative;border-radius:8px;overflow:hidden;align-self:start;text-decoration:none;color:#fff}
.auftakt img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.auftakt div{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(to top,rgba(30,28,26,.6),transparent)}
.auftakt b{display:block;font:500 22px/1.15 var(--schrift)}
.auftakt span{font-size:15px;opacity:.9}
.moment{display:grid;gap:10px;align-content:start;text-decoration:none}
.moment .bild{position:relative;border-radius:8px;overflow:hidden;transition:transform .35s var(--kurve),box-shadow .35s var(--kurve)}
.moment .bild img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.moment:hover .bild{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.moment .name{font:500 20px/1.25 var(--schrift);color:var(--ink)}
@media (max-width:760px){.band{grid-auto-columns:82%}.welt-kopf{flex-direction:column;align-items:flex-start;gap:6px}.welt-kopf .pfeil{display:none}}
/* Collage */
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,32px);padding-inline:clamp(14px,2.2vw,32px)}
.collage a{position:relative;border-radius:6px;overflow:hidden;display:block;aspect-ratio:1}
.collage img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .6s var(--kurve)}
.collage a:hover img{transform:scale(1.03)}
.collage a span{position:absolute;left:14px;bottom:12px;background:var(--papier);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:500;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--kurve)}
.collage a:hover span,.collage a:focus-visible span{opacity:1;transform:none}
@media (max-width:760px){.collage{grid-template-columns:1fr}.collage a:nth-child(n+2){display:none}.collage a span{opacity:1;transform:none}}
/* Serie */
.serie{background:var(--papier)}
.serie-kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;margin-bottom:28px}
.serie-kopf .kapitelkopf{margin:0}
.stadtkarte{text-decoration:none;color:var(--ink);background:var(--creme);border:2px dashed var(--sand);border-radius:var(--r);padding:clamp(22px,3vw,34px) clamp(22px,4vw,48px);display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap;max-width:760px;margin:clamp(28px,4vw,48px) auto 0;text-align:center}
.stadtkarte .st-ic{width:clamp(40px,5vw,56px);height:clamp(40px,5vw,56px);color:var(--akzent);flex:0 0 auto}
.stadtkarte b{font:500 clamp(24px,3vw,34px)/1.2 var(--schrift)}
.stadtkarte span{color:var(--grey);font-size:15px}
.stadtkarte .btn{color:#fff;font-size:17px;padding:.7em 1.5em}
.reiter{display:flex;flex-wrap:wrap;gap:8px}
.reiter button{font:500 15px/1 var(--schrift);padding:.7em 1.15em;border-radius:999px;border:1.5px solid var(--sand);background:var(--papier);cursor:pointer;color:var(--ink)}
.reiter button:hover{border-color:var(--ink)}
.reiter button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.reihe-box{max-width:1180px;margin:28px auto 0;padding-inline:var(--rand);position:relative}
.reihe-box[hidden]{display:none}
.reihe-pfeile{display:flex;gap:10px;justify-content:flex-end;margin-bottom:14px}
.reihe-pfeile .pfeil{width:40px;height:40px;font-size:20px}
.reihe{--abstand:clamp(12px,1.6vw,22px);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--abstand)) / 3);gap:var(--abstand);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:6px 14px}
.reihe::-webkit-scrollbar{display:none}
.reihe a{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px;scroll-snap-align:start;transition:transform .35s var(--kurve)}
.reihe a img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.reihe a:hover{transform:translateY(-6px)}
@media (max-width:760px){.serie-kopf{grid-template-columns:1fr}.reihe{grid-auto-columns:78%}.reihe-pfeile{display:none}}
/* Heimatstore */
.heimat{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.heimat .foto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--schatten-hoch)}
.heimat .foto img{width:100%;height:100%;object-fit:cover}
.heimat .text{display:grid;gap:14px;justify-items:start}
.heimat h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.015em}
.heimat .adresse{font-size:18px;line-height:1.6}
.heimat .grau{color:var(--grey)}
@media (max-width:760px){.heimat{grid-template-columns:1fr}}
/* 10.11.2026, Manuel: Faire-Streifen auch auf der Startseite - Ueberschrift im ruhigen Jost der Startseite statt Montserrat fett */
body.start .faire-streifen h2{font-family:var(--schrift);font-weight:400;font-size:clamp(26px,3vw,34px);letter-spacing:-.015em;line-height:1.14;color:var(--logo-blau);margin:0 0 8px}
body.start .faire-streifen p{font-size:17px}
body.start .faire-streifen .eyebrow{font:600 12px/1 var(--schrift);letter-spacing:.18em;margin-bottom:10px}
body.start #faire{padding-block:clamp(24px,4vw,48px)}
body.start #faire .faire-streifen{margin:0}
/* Sortimentsseite */
.seitenkopf{padding-block:clamp(36px,5vw,64px) clamp(20px,3vw,32px)}
.pfad{font-size:14px;color:var(--grey)}
.pfad a{text-decoration:none}
.seitenkopf h1{font-size:clamp(40px,6vw,68px);font-weight:400;letter-spacing:-.02em;margin-top:10px;max-width:16em}
.seitenkopf p{color:var(--grey);font-size:19px;max-width:38em;margin-top:12px}
.daten{display:flex;gap:8px;flex-wrap:wrap}
.daten span{font-size:14px;background:rgba(255,253,248,.92);color:var(--ink);border-radius:999px;padding:5px 11px}
.kacheln{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kachel{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;display:block;aspect-ratio:1}
.kachel img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .6s var(--kurve)}
.kachel:hover img{transform:scale(1.03)}
.kachel .unten{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(to top,rgba(30,28,26,.7),rgba(30,28,26,0));display:grid;gap:4px}
.kachel b{font:500 clamp(24px,2.6vw,34px)/1.05 var(--schrift)}
.kachel .z{font-size:16px;opacity:.95}
.k1,.k2{grid-column:span 3;aspect-ratio:4/3}.k3,.k4,.k5{grid-column:span 2;aspect-ratio:4/5}
.k1 img,.k2 img{height:100%;object-position:50% 50%}
@media (max-width:760px){.kacheln{grid-template-columns:1fr}.kachel,.k1,.k2,.k3,.k4,.k5{grid-column:1/-1;aspect-ratio:16/10}.kachel img{height:100%;object-position:50% 50%}}
.best{padding-block:clamp(48px,7vw,80px)}
.best .kopfz{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.best h2{font-size:clamp(28px,3.4vw,40px)}
.raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.raster .karte{display:grid;gap:8px;text-decoration:none;align-content:start}
.raster .karte:hover .motiv{transform:translateY(-5px);box-shadow:var(--schatten-hoch)}
.raster .karte b{font-weight:500;font-size:15px;line-height:1.3}
.raster .karte span{font-size:13px;color:var(--grey)}
@media (max-width:900px){.raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tueren{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tuer{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;text-decoration:none;color:#fff;display:block}
.tuer img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .6s var(--kurve)}
.tuer:hover img{transform:scale(1.03)}
.tuer div{position:absolute;inset:auto 0 0 0;padding:24px;background:linear-gradient(to top,rgba(30,28,26,.62),transparent)}
.tuer small{font:600 12px/1 var(--schrift);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.tuer b{display:block;font:500 clamp(26px,3vw,36px)/1.1 var(--schrift);margin-top:8px}
.preiszeile{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--papier);border-radius:var(--r);padding:20px 24px}
.preiszeile p{font-size:18px}
@media (max-width:760px){.tueren{grid-template-columns:1fr}}
/* Fuss */
.fuss{padding-block:48px;border-top:1px solid var(--sand);color:var(--grey);font-size:14px}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.fuss img{height:16px;width:auto}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* (520) Nachtrag 11.10.: Blumen-Hero mit grossem Logo, Motivwand als Band darunter */
.blumen{background:var(--creme) center/cover no-repeat;text-align:center;padding:clamp(56px,8vw,120px) var(--rand) clamp(48px,7vw,104px);display:grid;gap:16px;justify-items:center}
.blumen .marke{width:min(720px,84%)}
.blumen .claim{font-size:clamp(34px,5vw,60px)}
.blumen .tafel-text{background:color-mix(in srgb,var(--creme) 80%,transparent);border-radius:8px;padding:2px 10px}
.wand .motiv{cursor:zoom-in}
@media (max-width:760px){.wand .motiv:nth-child(n+9){display:none}}
/* Desktop (Manuel 12.10.2026: "das Blumenbild komplett darstellen, unten nicht abgeschnitten"): das Bild (2400 x 1327) wird ganz gezeigt.
   Der Block ist so hoch wie das Bild bei voller Breite (55,3 vw), hoechstens 820 px; darueber bleibt es mittig mit cremefarbenen Seiten. */
@media (min-width:761px){.blumen{background-size:contain;background-position:center top;min-height:min(55.3vw,820px);align-content:center}.blumen .claim{font-size:clamp(28px,3.4vw,48px)}}
/* Handy (Manuel 12.10.2026): das ganze Blumenbild in voller Breite, der Text liegt davor auf einer deckenden Karte (Mitte des Bildes ist ohnehin leer). */
@media (max-width:760px){
  .blumen{background-size:100% auto;background-position:center top;background-repeat:no-repeat;padding:clamp(34px,13vw,64px) 0 clamp(20px,6vw,36px)}
  .blumen-text{width:min(70%,420px);padding:18px 14px 20px;background:var(--creme);border-radius:14px;box-shadow:0 8px 28px rgba(47,47,48,.10)}
  .blumen .claim{font-size:clamp(24px,7.6vw,34px)}
}

/* Hinweis auf den Haendlershop zwischen den Abschnitten */
.haendlerband{text-align:center;padding-block:48px}
/* Grossansicht eines Motivs */
[data-gross],[data-galerie]{cursor:zoom-in}
.gross{position:fixed;inset:0;z-index:60;background:rgba(47,47,48,.6);display:grid;place-items:center;padding:16px}
.gross[hidden]{display:none}
.gross-karte{position:relative;background:var(--papier);border-radius:var(--r);padding:18px;display:grid;gap:14px;justify-items:center;width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto}
.gross-karte img{width:100%;max-height:68vh;object-fit:contain;border-radius:6px;clip-path:inset(0 0 4.5% 0);margin-bottom:-3%}
.gross-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.gross-leiste b{font:500 20px/1.3 var(--schrift);text-align:center}
.gross-zu{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:var(--creme);font:400 26px/1 var(--schrift);cursor:pointer;z-index:2}
/* (520) Nachtrag 2: Sprungziele nicht unter dem klebenden Kopf verstecken */
[id]{scroll-margin-top:84px}
/* 12.10.2026, Manuel: Menue mit drei Strichen im Kopf (Ueber uns, Haendlershop, Hier gibt es uns); Fuss zentriert */
.kopf .wrap{justify-content:space-between}
.kopfmenue{position:relative;margin-left:auto}
.menue-knopf{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;align-content:center;justify-items:center;gap:5px;padding:0}
.menue-knopf span{display:block;width:24px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--kurve),opacity .2s}
.menue-knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue-knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.kopfliste{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--papier);border:1px solid var(--sand);border-radius:var(--r);box-shadow:var(--schatten-hoch);padding:8px;flex-direction:column}
.kopfmenue.offen .kopfliste{display:flex}
.kopfliste a{padding:.8em 1em;border-radius:8px;font-size:16px;color:var(--ink);text-decoration:none;white-space:nowrap}
.kopfliste a:hover{background:var(--creme)}
.fuss .wrap{justify-content:center;text-align:center}
/* Hero: unten offen, nur noch Logo, Claim und Unterzeile */
.blumen{padding-bottom:clamp(40px,6vw,88px)}
/* Kacheln der Lieblingsorte und Lieblingsmomente: alle gleich hoch, der Auftakt streckt sich auf die Hoehe der Zeile;
   Szenenfotos mittig beschnitten (das Produkt steht meist in der Bildmitte), nicht oben */
.band{align-items:stretch}
.band .auftakt{align-self:start;aspect-ratio:2/3;min-height:0}   /* genauso hoch wie die Bildkarten, nicht bis zur Beschriftungszeile (Manuel 12.10.) */
.band .karte .motiv img,.moment .bild img,.band .auftakt img{object-position:50% 50%}
.moment .name,.band .karte span.z{min-height:2.5em}

/* Weniger Leerraum zwischen den Abschnitten (Manuel 12.10.2026): Hero -> Sortiment, Sortiment -> Zwei Welten, Wir sind Limo & Mo -> Hier findest Du uns */
#sortiment{padding-top:clamp(18px,2.6vw,34px);padding-bottom:clamp(28px,4vw,48px)}
#welten{padding-top:clamp(18px,2.6vw,34px)}
.familie{padding-bottom:clamp(18px,2.6vw,34px)}
#heimat{padding-top:clamp(18px,2.6vw,34px)}

/* Hero: Wrapper */
.blumen-text{display:grid;gap:16px;justify-items:center;width:100%}
/* Handy: Ueberschriften mit Text darunter stehen mittig (Manuel 12.10.2026: "in der App alle eher zentriert") */
@media (max-width:760px){
  .kapitelkopf{text-align:center;justify-items:center;margin-inline:auto}
  .welt-kopf{align-items:center;text-align:center}
  .welt-kopf>div:first-child{text-align:center}
  .welt-kopf .rechts{justify-content:center}
  .serie-kopf .kapitelkopf{margin-inline:auto}
  .heimat .text{justify-items:center;text-align:center}
}

/* (muss nach der Wrapper-Regel stehen) Handy: schmale deckende Textkarte, links und rechts bleiben die Blumen sichtbar */
@media (max-width:760px){
  .blumen-text{width:min(72%,420px);gap:12px;padding:16px 12px 18px}
}

/* Handy: schmale Textkarte im Hero */
@media (max-width:760px){.blumen-text{width:min(52%,300px);padding-inline:10px}}
/* Kopfzeile: oben nur das Menue, die Wortmarke erscheint erst, wenn die grosse aus dem Bild gescrollt ist (Manuel 12.10.2026: "zweimal gross Limo & Mo") */
body.start .kopf .marke-klein{opacity:0;visibility:hidden;transition:opacity .3s var(--kurve),visibility .3s}
body.start.kopf-marke .kopf .marke-klein{opacity:1;visibility:visible}

/* Hero als echtes Bild statt CSS-Hintergrund (Manuel 12.10.2026: auf dem Handy "funktioniert das gar nicht"): das Bild ist immer GANZ zu sehen.
   Desktop: so hoch wie der Block, mittig; Handy: volle Breite oben, die deckende Textkarte liegt davor. */
.blumen{position:relative;overflow:hidden}
.hero-bild{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:center top;z-index:0;pointer-events:none}
.blumen-text{position:relative;z-index:1}
@media (max-width:760px){.hero-bild{height:auto;object-fit:fill}}
/* Kopfzeile: oben steht das Menue in der Mitte; sobald die kleine Wortmarke erscheint, springt es nach rechts (Manuel 12.10.2026) */
body.start .kopf .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
body.start .kopf .marke-klein{grid-column:1;justify-self:start}
body.start .kopfmenue{grid-column:2;justify-self:center;margin-left:0}
body.start .kopfliste{right:auto;left:50%;transform:translateX(-50%)}
body.start.kopf-marke .kopfmenue{grid-column:3;justify-self:end}
body.start.kopf-marke .kopfliste{left:auto;right:0;transform:none}

/* 13.10.2026, Manuel: Hero nur noch Logo, Claim, "Papeterie & Souvenirs fuer den Handel" und der Knopf zum Haendlershop - die Box ist raus */
.hero-knopf{margin-top:clamp(4px,1vw,12px);color:#fff}
.blumen .tafel-text{font-size:clamp(16px,1.6vw,20px);letter-spacing:.02em}
/* Ueberschriften der Abschnitte im Blau der Wortmarke (Manuel 13.10.2026) */
body.start .kapitelkopf h2,body.start .heimat h2,body.start .welt-kopf h3{color:var(--logo-blau)}
/* Sortimentskacheln: der Name steht auf einer deckenden Flaeche, damit er auf jedem Foto lesbar ist (Manuel 13.10.2026) */
.kachel .unten{inset:auto auto 14px 14px;max-width:calc(100% - 28px);padding:10px 16px 11px;background:var(--papier);border-radius:10px;box-shadow:0 4px 14px rgba(47,47,48,.14);color:var(--ink);gap:2px}
.kachel .unten b{color:var(--logo-blau);font-size:clamp(20px,2.1vw,28px)}
.kachel .unten .z{color:var(--grey);font-size:14px;opacity:1}
.kachel .unten .z:empty{display:none}
@media (max-width:760px){.blumen-text{width:min(60%,300px)}.hero-knopf{white-space:nowrap;font-size:14px;padding:.75em 1.1em}}
/* 13.10.2026, Manuel: der Claim endet links und rechts genau mit der Wortmarke - eine Zeile, ohne Sperrung;
   die Groesse folgt der Breite der Wortmarke (min(720px,84%) des Textblocks), start.js setzt sie danach exakt */
.blumen-text{container-type:inline-size}
.blumen .claim{white-space:nowrap;letter-spacing:0;font-size:calc(min(720px,84cqi) / 15.6)}
/* 13.10.2026, Manuel: am Handy "sieht man auch noch die Box, die muss da weg" - Logo, Claim und Knopf stehen ohne Karte direkt im Blumenbild */
@media (max-width:760px){.blumen-text{background:none;box-shadow:none;border-radius:0;padding:0}}
/* 13.10.2026, Manuel: "Das Logo muss auf dem Handy auch schoen gross dargestellt werden" - Wortmarke fast ueber die ganze Breite, Claim folgt ihr */
@media (max-width:760px){.blumen-text{width:88%}.blumen .marke{width:100%}.blumen .claim{font-size:calc(100cqi / 15.6)}}
/* 13.10.2026, Manuel: "die Schrift noch etwas mehr absetzen, damit man sie besser lesen kann" - etwas kraeftiger, dunkler, dichter cremefarbener Schein */
.blumen .claim{font-weight:400;color:#5A4F49;text-shadow:0 0 2px var(--creme),0 0 4px var(--creme),0 0 8px var(--creme),0 0 14px var(--creme),0 0 24px var(--creme)}
/* 13.10.2026, Manuel: die Namensflaechen der Sortimentskacheln "zu hart" - leicht durchscheinend, das Foto dahinter verschwommen */
.kachel .unten{background:color-mix(in srgb,var(--papier) 58%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 2px 10px rgba(47,47,48,.08);border:1px solid color-mix(in srgb,#fff 45%,transparent)}
.kachel .unten .z{color:var(--ink)}
/* 14.10.2026, Manuel: der Claim ist "zu fett und plump" - Jost Light statt Regular; die Lesbarkeit kommt vom dunklen Ton und dem Schein, nicht vom Gewicht.
   (Kursiv geht nicht: Jost liegt nur aufrecht vor, der Browser wuerde die Schraege nur kuenstlich kippen.) */
.blumen .claim{font-weight:300;color:#4E443F}
/* 14.10.2026, Manuel: am Handy "den Hintergrund hinter der Schrift noch einen Tick mehr verschwimmen lassen" - weicher Weichzeichner
   hinter der Zeile, an den Raendern ausgeblendet, damit keine Kante entsteht */
@media (max-width:760px){
  .blumen .claim{position:relative;isolation:isolate}
  .blumen .claim::before{content:"";position:absolute;inset:-.45em -.9em;z-index:-1;border-radius:999px;
    background:color-mix(in srgb,var(--creme) 38%,transparent);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
}
/* 14.10.2026: die Spalte des Hero-Texts ist fest so breit wie der Block - sonst weitet der einzeilige Claim die Spalte,
   die Wortmarke (Breite in %) waechst mit, start.js vergroessert den Claim wieder: am Handy schaukelte sich das hoch */
.blumen-text{grid-template-columns:minmax(0,1fr)}
/* 15.10.2026, Manuel: "Das Hero-Bild mit den Blumen kommt einfach nicht gut an. Nimm es raus in der mobile version, desktop lassen."
   Auf dem Handy kein Blumenbild mehr: Wortmarke, Claim und Knopf stehen allein auf Creme, oben weniger Luft (die war fuer die Blueten). */
@media (max-width:760px){.hero-bild{display:none}.blumen{padding:clamp(28px,8vw,44px) 0 clamp(24px,6vw,36px)}}

/* 16.10.2026, Olivia: das Menue (drei Striche) steht ganz links in der Kopfzeile - immer, auch wenn die kleine Wortmarke
   erscheint; die steht dann in der Mitte. Ersetzt "Menue mittig, springt nach rechts" (Manuel 12.10.2026). */
body.start .kopfmenue,body.start.kopf-marke .kopfmenue{grid-column:1;grid-row:1;justify-self:start;margin-left:-10px}
body.start .kopf .marke-klein{grid-column:2;grid-row:1;justify-self:center}
body.start .kopfliste,body.start.kopf-marke .kopfliste{left:0;right:auto;transform:none}

/* 16.10.2026, Olivia: auf dem iPad (761-1199 px) lagen Wortmarke und Claim ueber den Blumen - dort kleiner, damit beides
   in der freien Mitte des Kranzes steht. Der Claim folgt der Breite der Wortmarke (gleiche Rechnung wie oben, /15.6). */
@media (min-width:761px) and (max-width:1199px){
  .blumen .marke{width:min(480px,46%)}
  .blumen .claim{font-size:calc(min(480px,46cqi) / 15.6)}
}

/* 17.10.2026, Manuel: Log-in oben rechts, schwarz und schlicht wie die drei Striche links (gleiche Flaeche, gleiche Strichstaerke) */
.kopf-login{grid-column:3;grid-row:1;justify-self:end;width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;color:var(--ink)}
.kopf-login svg{width:24px;height:24px}
.kopf-login:hover{color:var(--akzent-dunkel)}