/* contact in Augsburg e.V. · Probeseite Herzstück Web
   Designwelt: Kontakt. Freskoputz, Terrakotta und Ocker aus dem Logo, Sofortbilder aus den Hallen, eine Linie, die verbindet */
:root{
  --putz:#f6efe3; --putz-2:#ece1cf; --putz-3:#dccdb4;
  --terra:#b4472c; --terra-d:#8c321c; --terra-h:#d4694b;
  --ocker:#d9963a; --ocker-h:#f0b860;
  --himmel:#6e98c2; --himmel-d:#3f6a95;
  --sepia:#2a1f19; --sepia-2:#3a2c23;
  --tinte:#2a211b; --tinte-w:#54473d; --grau:#6d6157;
  --salbei:#5d7a58;
  --kopf:'Fraunces',Georgia,serif; --text:'Manrope',Arial,sans-serif; --hand:'Caveat','Comic Sans MS',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
html.ruhig{scroll-behavior:auto}
body{margin:0;background:var(--putz);color:var(--tinte);font-family:var(--text);font-size:18px;line-height:1.65;overflow-x:clip}
html.gross body{font-size:22px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kopf);font-weight:600;line-height:1.08;margin:0 0 .45em;letter-spacing:-.012em;text-wrap:balance;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.6rem,5.6vw,4.8rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2}
p{margin:0 0 1em}
.in{width:min(1180px,100% - 32px);margin:0 auto}
.in.schmal{max-width:800px}
.in.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.in.zwei.mitte-y{align-items:center}
@media(max-width:860px){.in.zwei{grid-template-columns:1fr}}
.lead{font-size:clamp(1.1rem,1.6vw,1.28rem);color:var(--tinte-w);max-width:36em}
.klein{font-size:.95rem;color:var(--grau)}
.mitte{justify-content:center}
.nw{white-space:nowrap}
.sprung{position:absolute;left:-999px;top:8px;background:var(--ocker);color:var(--sepia);padding:10px 16px;z-index:100;border-radius:4px;font-weight:800}
.sprung:focus{left:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--himmel-d);outline-offset:3px}
main a:not(.knopf):not(.karte){color:var(--terra-d);text-underline-offset:3px}
main p a,main li a{display:inline-block;padding:.5em 0;margin:-.5em 0}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.da{opacity:1;transform:none}
html.ruhig .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Kontaktpunkt-Marke ---------- */
.marke{display:flex;align-items:center;gap:12px;margin:0 0 1em;font-weight:800;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-d)}
.punkt{position:relative;display:inline-block;width:34px;height:16px;flex:none}
.punkt i{position:absolute;top:0;width:15px;height:16px;border:3px solid var(--terra);border-radius:50%}
.punkt i:first-child{left:0;border-right-color:transparent}
.punkt i:last-child{right:0;border-left-color:transparent}
.punkt::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--ocker)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;font-family:var(--text);font-weight:800;font-size:1.02rem;line-height:1.2;padding:.85em 1.4em;border-radius:999px;text-decoration:none;min-height:50px;border:2px solid transparent;transition:transform .15s,background .15s,color .15s;text-align:center;cursor:pointer}
.knopf.voll{background:var(--terra);color:#fff;box-shadow:0 4px 14px rgba(180,71,44,.28)}
.knopf.voll:hover{background:var(--terra-d);transform:translateY(-1px)}
.knopf.rand{border-color:var(--sepia);color:var(--sepia);background:transparent}
.knopf.rand:hover{background:var(--sepia);color:#fff}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}
@media(max-width:600px){main .knopf{width:100%}}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(246,239,227,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(42,31,25,.1);transition:box-shadow .2s}
.kopf.fest{box-shadow:0 6px 22px rgba(42,31,25,.1)}
.kopf-in{width:min(1180px,100% - 32px);margin:0 auto;display:flex;align-items:center;gap:18px;min-height:78px}
.logo{flex:none;display:flex;align-items:center;gap:12px;text-decoration:none;padding:6px 0}
.logo img{height:52px;width:auto;border-radius:6px;box-shadow:0 2px 6px rgba(42,31,25,.18)}
.logo span{font-family:var(--kopf);font-weight:600;font-size:1.45rem;line-height:1;letter-spacing:.04em}
.logo small{display:block;font-family:var(--text);font-size:.86rem;letter-spacing:.05em;font-weight:700;color:var(--tinte-w);margin-top:4px}
.haupt{margin-left:auto}
.haupt ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.haupt a{display:block;padding:12px 10px;text-decoration:none;font-weight:700;font-size:.98rem;color:var(--tinte);position:relative}
.haupt a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:3px;border-radius:2px;background:var(--terra);transform:scaleX(0);transition:transform .25s}
.haupt a:hover::after,.haupt a[aria-current]::after{transform:none}
.kopf-r{display:flex;align-items:center;gap:14px;flex:none}
.sprache{font-size:.85rem;letter-spacing:.12em;text-decoration:none;font-weight:800;color:var(--grau);padding:12px 12px}
.tel{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;line-height:1.15;padding:6px 0}
.tel b{font-weight:800;font-size:1.02rem}
.status{font-size:.82rem;color:var(--grau);display:flex;align-items:center;gap:6px}
.status:empty{display:none}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#a99d90}
.status.offen{color:#2f6b37}.status.offen::before{background:#3a9a4a;box-shadow:0 0 0 3px rgba(58,154,74,.2)}
.mknopf,.mnav{display:none}
@media(max-width:1180px){.haupt a{padding:12px 7px;font-size:.93rem}.haupt a::after{left:7px;right:7px}.kopf-r .tel{display:none}}
@media(max-width:1000px){
  .kopf-in{min-height:68px}
  .logo img{height:44px}
  .logo span{font-size:1.25rem}
  .haupt,.kopf-r .sprache{display:none}
  .kopf-r{margin-left:auto}
  .mknopf{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:2px solid var(--sepia);border-radius:999px;cursor:pointer;background:transparent;color:var(--sepia);font-family:var(--text);font-weight:800;font-size:1rem}
  .mknopf .punkt{width:30px;transition:width .3s}
  .kopf.offen .mknopf{background:var(--sepia);color:#fff}
  .kopf.offen .mknopf .punkt{width:22px}
  .kopf.offen .mknopf .punkt i{border-color:var(--ocker-h);border-right-color:transparent}
  .kopf.offen .mknopf .punkt i:last-child{border-color:var(--ocker-h);border-left-color:transparent}
  .mnav{display:block;position:fixed;inset:70px 0 0 0;z-index:49;background:var(--putz);clip-path:circle(0 at 100% 0);visibility:hidden;transition:clip-path .5s ease,visibility 0s .5s;overflow:auto;padding:16px 16px 130px}
  .mnav.offen{clip-path:circle(150% at 100% 0);visibility:visible;transition:clip-path .5s ease,visibility 0s}
  html.ruhig .mnav{transition:none}
  .mnav ul{list-style:none;margin:0;padding:0}
  .mnav li a{display:block;padding:14px 4px;font-family:var(--kopf);font-weight:600;font-size:1.8rem;line-height:1.15;text-decoration:none;border-bottom:1px solid rgba(42,31,25,.12)}
  .mnav li a[aria-current]{color:var(--terra)}
  .mnav-u{margin-top:24px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .mnav-u .sprache{display:inline-block;font-size:1rem;background:var(--putz-2);padding:10px 16px;border-radius:999px}
}

/* ---------- Hero mit Sofortbildern ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,90px) 0 clamp(50px,7vw,100px);background:radial-gradient(ellipse at 85% 30%,rgba(217,150,58,.22),transparent 55%),radial-gradient(ellipse at 10% 100%,rgba(110,152,194,.18),transparent 50%),var(--putz)}
.hero .in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero-vor{font-family:var(--hand);font-size:1.7rem;line-height:1.15;text-wrap:balance;color:var(--terra);margin:0 0 .3em;transform:rotate(-2deg);transform-origin:left}
.hero h1{font-size:clamp(3rem,6.4vw,5.6rem);line-height:1}
.hero h1 em{font-style:italic;color:var(--terra)}
.hero-stapel{position:relative;height:clamp(380px,40vw,520px)}
.hero-stapel .polaroid{position:absolute;width:62%;animation:auflegen 1.1s cubic-bezier(.2,.8,.2,1) both}
.hero-stapel .polaroid:nth-child(1){left:2%;top:4%;animation-delay:.2s}
.hero-stapel .polaroid:nth-child(2){right:2%;top:18%;animation-delay:.55s}
.hero-stapel .polaroid:nth-child(3){left:18%;bottom:0;animation-delay:.9s}
.hero-notiz{position:absolute;right:0;top:0;font-family:var(--hand);font-size:1.5rem;color:var(--terra-d);transform:rotate(-4deg);max-width:9em;line-height:1.05;text-align:right;animation:auflegen 1s ease 1.5s both}
@keyframes auflegen{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--r,0deg) * 3)) scale(1.08)}to{opacity:1;transform:rotate(var(--r,0deg))}}
html.ruhig .hero-stapel .polaroid,html.ruhig .hero-notiz{animation:none}
@media(prefers-reduced-motion:reduce){.hero-stapel .polaroid,.hero-notiz{animation:none}}
@media(max-width:860px){
  .hero .in{grid-template-columns:1fr}
  .hero-stapel{height:clamp(300px,82vw,440px);order:-1;margin-bottom:6px}
  .hero-stapel .polaroid{width:64%}
  .hero-notiz{font-size:1.25rem;max-width:7.5em}.hero-vor{font-size:1.45rem}
  .hero h1{font-size:clamp(2.8rem,12vw,4rem)}
}

/* ---------- Sofortbild ---------- */
.polaroid{display:block;position:relative;margin:0;padding:10px 10px 0;background:#fffdf8;border:0;font:inherit;color:inherit;text-align:left;box-shadow:0 14px 30px rgba(42,31,25,.22),0 2px 4px rgba(42,31,25,.12);transform:rotate(var(--r,0deg));transition:transform .35s ease,box-shadow .35s ease}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--putz-2)}
.p-text{display:block;font-family:var(--hand);font-size:1.35rem;line-height:1.1;padding:10px 4px 14px;color:var(--sepia)}
.p-abt{position:absolute;top:18px;right:18px;background:var(--sepia);color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;border-radius:999px}
button.polaroid{cursor:zoom-in}
button.polaroid:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 22px 40px rgba(42,31,25,.28);z-index:2}
.wand{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,34px);padding:10px 4px}
@media(max-width:960px){.wand{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.wand{grid-template-columns:repeat(2,1fr);gap:16px}.p-text{font-size:1.15rem}.p-abt{font-size:.86rem;top:14px;right:14px}}

/* Grossansicht */
.gross-ansicht{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(42,31,25,0);transition:background .6s ease;visibility:hidden}
.gross-ansicht.auf{background:rgba(42,31,25,.88);visibility:visible}
.gross-ansicht figure{margin:0;max-width:min(1100px,100%);transform:scale(.9) rotate(-2deg);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s ease;background:#fffdf8;padding:14px 14px 0;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.gross-ansicht.auf figure{transform:none;opacity:1}
.gross-ansicht img{max-height:76vh;width:auto;margin:0 auto}
.gross-ansicht figcaption{font-family:var(--hand);font-size:1.6rem;text-align:center;padding:10px 0 14px;color:var(--sepia)}
.gross-ansicht .zu{position:absolute;top:16px;right:16px;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:#fffdf8;color:var(--sepia);font-family:var(--text);font-weight:800;font-size:1rem;cursor:pointer}
html.ruhig .gross-ansicht,html.ruhig .gross-ansicht figure{transition:none}

/* ---------- Jetzt-Band ---------- */
.jetzt{background:var(--sepia);color:#fff;padding:15px 0;text-align:center;font-weight:700}
.jetzt p{margin:0;text-wrap:balance}
.lampe{display:inline-block;vertical-align:-1px;margin-right:12px;width:12px;height:12px;border-radius:50%;background:#7fd38c;box-shadow:0 0 0 4px rgba(127,211,140,.25)}
.lampe.zu{background:var(--ocker-h);box-shadow:0 0 0 4px rgba(240,184,96,.25)}

/* ---------- Blöcke ---------- */
.block{padding:clamp(54px,7vw,104px) 0}
.block.hell{background:var(--putz-2)}
.titel+.block{padding-top:clamp(16px,2.6vw,36px)}
.k-kopf{max-width:46em;margin-bottom:30px}
.k-kopf p{color:var(--tinte-w)}
.fussnote{margin-top:14px;color:var(--tinte-w);font-size:.98rem}

/* ---------- Linie ---------- */
.linie{position:relative;padding:10px 0}
.faden{position:absolute;left:0;top:0;width:56px;height:100%;overflow:visible}
.faden path{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--off,0)}
.linie ol{list-style:none;margin:0;padding:0 0 0 80px;display:grid;gap:clamp(30px,4vw,46px)}
.station{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-left:-80px}
.kp{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--putz);border:3px solid var(--terra);color:var(--terra-d);font-family:var(--kopf);font-weight:600;font-size:1.5rem;position:relative;z-index:1;transition:background .4s,color .4s,box-shadow .4s}
.station.an .kp{background:var(--terra);color:#fff;box-shadow:0 0 0 8px rgba(180,71,44,.15)}
.station h3{margin:.35em 0 .45em;font-size:clamp(1.45rem,2.2vw,1.8rem)}
.station p{margin:0;color:var(--tinte-w)}
.block.hell .kp{background:var(--putz-2)}
.zitat{margin:28px 0 0;padding:22px 0 0;border-top:2px dotted var(--terra-h)}
.zitat p{font-family:var(--kopf);font-style:italic;font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.3;margin:0 0 .4em;color:var(--sepia)}
.zitat cite{font-style:normal;font-family:var(--hand);font-size:1.3rem;color:var(--terra-d)}
.zitat.klein p{font-size:1.2rem}

/* ---------- Zahlen ---------- */
.zahlen{background:var(--terra);color:#fff;padding:clamp(44px,6vw,80px) 0}
.zahlen .in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.z{border-top:2px solid rgba(255,255,255,.5);padding-top:16px}
.z b{display:block;font-family:var(--kopf);font-weight:600;font-size:clamp(3rem,5.6vw,4.6rem);line-height:1;margin-bottom:.15em;color:#fff}
.z span{color:rgba(255,255,255,.92);font-size:1rem;display:block}
@media(max-width:860px){.zahlen .in{grid-template-columns:1fr 1fr;gap:30px 20px}}

/* ---------- Foto-Rahmen, Karten ---------- */
.foto-rahmen{margin:0;background:#fffdf8;padding:12px 12px 0;box-shadow:0 18px 36px rgba(42,31,25,.18);transform:rotate(-1deg)}
.foto-rahmen img{width:100%;aspect-ratio:4/3;object-fit:cover}
.foto-rahmen figcaption{font-family:var(--hand);font-size:1.35rem;color:var(--sepia);padding:10px 4px 14px;text-wrap:balance}
.foto-rahmen.klein{max-width:420px;justify-self:center}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.karte{display:flex;flex-direction:column;background:#fffdf8;text-decoration:none;color:var(--tinte);box-shadow:0 14px 30px rgba(42,31,25,.12);border-radius:4px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.karte:hover{transform:translateY(-4px);box-shadow:0 22px 40px rgba(42,31,25,.18)}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover}
.karte div{padding:20px 22px 24px}
.karte p{margin:0;color:var(--tinte-w)}
@media(max-width:900px){.drei{grid-template-columns:1fr}}

/* ---------- Wochenleiste (Öffnungszeiten) ---------- */
.besuch .in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.besuch .in{grid-template-columns:1fr}}
.woche{background:#fffdf8;padding:28px 26px 22px;box-shadow:0 18px 36px rgba(42,31,25,.14);border-radius:4px;border-top:6px solid var(--terra)}
.w-kopf{font-family:var(--kopf);font-weight:600;font-size:1.5rem;margin:0 0 18px;line-height:1.2}
.woche ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.woche li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 2px;border-radius:16px;background:var(--putz);text-align:center;position:relative}
.woche li b{font-weight:800;font-size:1rem}
.woche li span{font-size:.84rem;color:var(--tinte-w);font-weight:700;line-height:1.2}
.woche li.zu{background:transparent;border:2px dashed var(--putz-3)}
.woche li.zu span{color:var(--grau)}
.woche li.heute{background:var(--terra);color:#fff}
.woche li.heute span{color:#fff}
.woche li.heute::after{content:attr(data-heute-text);position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-6deg);font-family:var(--hand);font-size:1.25rem;color:var(--terra-d);white-space:nowrap}
.woche ol{margin-top:34px}
.w-fuss{margin:18px 0 0;color:var(--tinte-w);font-size:.98rem}
@media(max-width:420px){.woche{padding:24px 14px 18px}.woche ol{gap:4px}.woche li b{font-size:.9rem}}

/* ---------- Titel ---------- */
.titel{padding:clamp(44px,6vw,90px) 0 clamp(20px,3vw,40px)}
.titel.mit-bild .in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.t-stapel{position:relative;height:clamp(300px,30vw,400px)}
.t-stapel .polaroid{position:absolute;width:56%}
.t-stapel .polaroid:nth-child(1){left:0;top:0}
.t-stapel .polaroid:nth-child(2){right:0;top:12%}
.t-stapel .polaroid:nth-child(3){left:22%;bottom:0}
@media(max-width:860px){.titel.mit-bild .in{grid-template-columns:1fr}.t-stapel{height:clamp(280px,78vw,400px)}.t-stapel .polaroid{width:58%}}

/* ---------- Listen ---------- */
.regal-liste{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.regal-liste li{background:#fffdf8;border:1px solid var(--putz-3);border-radius:999px;padding:.4em 1em;font-weight:700;font-size:.98rem}
.punkte{padding-left:1.2em;margin:.6em 0 0}
.punkte li{margin-bottom:.5em}
.punkte li::marker{color:var(--terra)}
.partner{list-style:none;margin:0;padding:0}
.partner li{padding:10px 0;border-bottom:1px dotted var(--terra-h);font-weight:700}

/* ---------- Läden ---------- */
.laden{background:#fffdf8;box-shadow:0 14px 30px rgba(42,31,25,.12);border-radius:4px;overflow:hidden}
.laden img{width:100%;aspect-ratio:16/10;object-fit:cover}
.l-text{padding:24px 26px 28px}
.zeiten{display:grid;grid-template-columns:auto auto;justify-content:start;gap:6px 22px;margin:14px 0 0}
.zeiten dt{font-weight:700;color:var(--tinte-w)}
.zeiten dd{margin:0;font-weight:800}
@media(max-width:480px){.zeiten{grid-template-columns:1fr;gap:0}.zeiten dd{margin-bottom:8px}}

/* ---------- Spenden ---------- */
.drei-gewinn{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.drei-gewinn::before{content:"";position:absolute;left:28px;right:calc((100% - 48px)/3 - 28px);top:28px;height:3px;background:repeating-linear-gradient(90deg,var(--terra) 0 10px,transparent 10px 18px)}
.drei-gewinn div{position:relative}
.drei-gewinn h3{margin:.7em 0 .4em}
.drei-gewinn p{margin:0;color:var(--tinte-w)}
@media(max-width:760px){.drei-gewinn{grid-template-columns:1fr}.drei-gewinn::before{left:27px;right:auto;top:28px;bottom:28px;width:3px;height:auto;background:repeating-linear-gradient(180deg,var(--terra) 0 10px,transparent 10px 18px)}.drei-gewinn div{padding-left:76px;min-height:56px}.drei-gewinn .kp{position:absolute;left:0;top:0}.drei-gewinn h3{margin-top:.2em}}
.ueberweisung{background:#fffdf8;padding:28px 28px 24px;box-shadow:0 18px 36px rgba(42,31,25,.14);border-left:8px solid var(--ocker)}
.u-kopf{font-family:var(--hand);font-size:1.8rem;color:var(--terra-d);margin:0 0 10px;line-height:1}
.ueberweisung dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 16px}
.ueberweisung dt{font-weight:700;color:var(--tinte-w)}
.ueberweisung dd{margin:0;font-weight:800;overflow-wrap:anywhere}
.ueberweisung .iban{font-family:var(--text);letter-spacing:.04em}
.kopieren.ok{background:var(--salbei);border-color:var(--salbei);color:#fff}

/* ---------- Verein ---------- */
.vorstand{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.vorstand figure{margin:0;text-align:center}
.vorstand .polaroid{max-width:230px;justify-self:center;width:100%}
.vorstand figcaption{color:var(--tinte-w);text-align:center}
.vorstand figcaption b{display:block;color:var(--sepia);font-size:1.45rem}
.vorstand .zitat{grid-column:1/-1}
.zeit{list-style:none;margin:30px 0 0;padding:0;max-width:820px;position:relative}
.zeit::before{content:"";position:absolute;left:27px;top:14px;bottom:14px;width:3px;background:var(--terra)}
.zeit li{display:grid;grid-template-columns:56px 1fr;gap:20px;margin-bottom:30px;align-items:start}
.zeit li .kp{width:56px;height:56px;grid-row:span 2}
.zeit li .kp::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--terra)}
.zeit b{grid-column:2;font-family:var(--hand);font-size:1.5rem;color:var(--terra-d);line-height:1;margin-top:6px}
.zeit li div{grid-column:2}
.zeit h3{margin-bottom:.45em}
.zeit p{margin:0;color:var(--tinte-w)}

/* ---------- Kontakt, Lesetext ---------- */
.kontakt{list-style:none;margin:0;padding:0}
.kontakt li{display:grid;grid-template-columns:160px 1fr;gap:10px;padding:10px 0;border-bottom:1px dotted var(--terra-h);align-items:baseline}
.kontakt span{font-family:var(--hand);font-size:1.3rem;color:var(--terra-d)}
.kontakt a,.kontakt b{font-weight:800;overflow-wrap:anywhere}
@media(max-width:480px){.kontakt li{grid-template-columns:1fr;gap:0}}
.lese h2{font-size:1.5rem;margin:1.5em 0 .45em}
.lese>:first-child{margin-top:0}

/* ---------- Schalter ---------- */
.schalter-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:16px}
.schalter{position:relative;text-align:left;font:inherit;color:var(--tinte);cursor:pointer;background:#fffdf8;border:0;border-radius:4px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 24px rgba(42,31,25,.12)}
.schalter b{font-family:var(--kopf);font-weight:600;font-size:1.35rem}
.schalter span:last-child{color:var(--tinte-w)}
.schalter[aria-pressed=true]{background:#fbeee6;outline:3px solid var(--terra)}
.schalter[aria-pressed=true] .kp{background:var(--terra);color:#fff}
.schalter::after{content:"aus";position:absolute;right:16px;top:18px;background:var(--putz-2);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;border-radius:999px}
.schalter[aria-pressed=true]::after{content:"an";background:var(--terra);color:#fff}
html[lang=en] .schalter::after{content:"off"}
html[lang=en] .schalter[aria-pressed=true]::after{content:"on"}
@media(max-width:760px){.schalter-reihe{grid-template-columns:1fr}}

/* ---------- Fuss ---------- */
.fuss{background:var(--sepia);color:rgba(255,255,255,.86);padding:clamp(44px,6vw,70px) 0 20px}
.fuss-in{width:min(1180px,100% - 32px);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr .9fr 1.9fr;gap:34px}
.f-marke img{width:190px;border-radius:6px;box-shadow:0 0 0 4px #fffdf8}
.claim{font-family:var(--hand);color:var(--ocker-h);margin-top:16px;font-size:1.35rem;line-height:1.15}
.fuss h2{font-family:var(--text);font-size:.84rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-h);margin:0 0 .9em;line-height:1.3}
.fuss a{color:#fff;text-decoration:none;display:inline-block;padding:10px 0;min-width:44px}
.fuss a.mail{overflow-wrap:anywhere;font-size:.95rem}
.fuss a:hover{text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{line-height:1.3}
.f-zeit b{color:#fff}
.f-zeit span{color:var(--ocker-h)}
.f-spalten{display:grid;grid-template-columns:repeat(3,auto);gap:24px;justify-content:space-between}
.f-spalten li{font-size:.98rem}
.f-u{width:min(1180px,100% - 32px);margin:30px auto 0;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.88rem;color:rgba(255,255,255,.66)}
@media(max-width:1080px){.fuss-in{grid-template-columns:1fr 1fr}.f-spalten{grid-column:1/-1}}
@media(max-width:600px){.fuss-in{grid-template-columns:1fr}.f-spalten{grid-template-columns:1fr 1fr}}
.herzstueck{background:#0b0b0c;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px 86px}
.herzstueck span{color:#d9d4c7;font-size:14px}
.herzstueck img{width:180px}
@media(min-width:1001px){.herzstueck{padding-bottom:12px}}
@media(max-width:1000px){.herzstueck span{font-size:13px}.herzstueck img{width:150px}}
.leiste{display:none}
@media(max-width:1000px){
  .leiste{display:grid;grid-template-columns:1.2fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:48;background:rgba(42,31,25,.97);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .leiste a{display:grid;place-items:center;min-height:48px;color:#fff;text-decoration:none;font-weight:800;font-size:1rem;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
  .leiste a.an{background:var(--terra);border-color:var(--terra)}
}

/* ---------- Kontrast ---------- */
html.kontrast{--putz:#fff;--putz-2:#f1f1f1;--tinte:#000;--tinte-w:#111;--grau:#222;--terra-d:#6e2412;--terra:#8c321c}
html.kontrast .kopf{background:#fff}
html.kontrast .polaroid,html.kontrast .karte,html.kontrast .woche,html.kontrast .laden,html.kontrast .ueberweisung{box-shadow:none;outline:2px solid #000}
html.kontrast .polaroid,html.kontrast .foto-rahmen{transform:none}

.hero-stapel .polaroid:not(:nth-child(3)) .p-text,.t-stapel .polaroid:not(:last-child) .p-text{visibility:hidden}
.w-kopf,.schalter b,.u-kopf,.station h3{font-variation-settings:"opsz" 96}
.in.gleich{align-items:stretch}
.wand.drei-sp{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.wand.drei-sp{grid-template-columns:repeat(2,1fr)}}
.foto-rahmen.unter{margin-top:34px}
.in.mitte-t{text-align:center}.marke.mitte{justify-content:center}
.drei .karte{padding:10px 10px 0;border-radius:0;transform:rotate(-1deg)}
.drei .karte:nth-child(2){transform:rotate(1deg)}
.drei .karte:hover{transform:rotate(0) translateY(-4px)}
.drei .karte div{padding:16px 8px 20px}
.ueberweisung .iban{white-space:nowrap;font-size:.96rem}
@media(max-width:600px){.ueberweisung{padding:24px 18px 20px}.ueberweisung dl{grid-template-columns:1fr;gap:0}.ueberweisung dt{font-size:.88rem;margin-top:8px}}
html.kontrast .drei .karte{transform:none}
.karte h3{margin-bottom:.45em}