/* =========================================================================
   Wohlfarth & Pulter - ruhige Immobilien- und Hausverwaltungsseite.

   Design Read: Landingpage für Eigentümer, Verkäufer und Mieter in Greiz.
   Sprache: dunkel, sachlich, verwaltungsnah, mit echten Referenzobjekten statt
   Makler-Glanz. Regler: Varianz 5, Bewegung 3, Dichte 5.
   ========================================================================= */

@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('assets/schrift/archivo-600-x.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/schrift/archivo-700-x.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/schrift/public-sans-400.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/schrift/public-sans-500.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/schrift/public-sans-600.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/schrift/public-sans-700.woff2') format('woff2');}

:root{
  /* Helles Design (03.08.2026 auf Ansage). Warmes Off-White statt Reinweiss,
     damit die Flaechen (Karten) sich absetzen koennen. Alle Werte gegen die
     drei Untergruende gerechnet, kleinster Kontrast 5,6:1. */
  --grund:#FBFAF8;        /* Seitengrund, warmes Off-White */
  --flaeche:#FFFFFF;      /* Karten und Felder */
  --band:#F3F1EE;         /* abgesetztes Band */
  --tinte:#1A1C20;        /* Fliesstext, 16,4:1 */
  --leise:#5B6169;        /* gedaempft, 6,0:1 */
  /* Akzent aus dem Firmenlogo (bilder/logo.gif der Firma): Pflaume #864565.
     Auf hellem Grund traegt derselbe Ton Flaeche UND Schrift — anders als im
     dunklen Entwurf braucht es keinen zweiten, helleren Ton. */
  --akzent:#864565;
  --akzent-hell:#74374F;  /* Hover: dunkler, nicht heller */
  --akzent-txt:#74374F;   /* Schrift/Links, 8,4:1 */
  --akzent-auf:#FFFFFF;
  --linie:rgba(26,28,32,.13);
  --linie-2:rgba(26,28,32,.26);
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,sans-serif;
  --radius:6px;
  --breite:78rem;
  --rand:clamp(1rem,4vw,4rem);
  --luft:clamp(4rem,8vw,7rem);
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--body);font-size:clamp(1rem,.97rem + .22vw,1.07rem);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
address{font-style:normal;}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:0;line-height:1.05;text-wrap:balance;}
p{text-wrap:pretty;}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px;}

.innen{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);}
.abschnitt{padding-block:var(--luft);position:relative;}
.band{background:var(--band);}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sprung:focus{position:fixed;left:1rem;top:1rem;z-index:1000;width:auto;height:auto;margin:0;clip:auto;overflow:visible;background:var(--akzent);color:var(--akzent-auf);padding:.75rem 1rem;border-radius:var(--radius);font-weight:700;}
.lead{font-size:clamp(1.05rem,1rem + .45vw,1.24rem);line-height:1.58;color:var(--leise);max-width:58ch;}
.titel{font-size:clamp(2rem,1.2rem + 3.1vw,3.65rem);max-width:15ch;margin-bottom:1.1rem;}
.schild{display:inline-flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent-txt);}
.schild::before{content:"";width:2.4rem;height:1px;background:currentColor;}
.fussnote{font-size:.78rem;color:var(--leise);border-top:1px solid var(--linie);padding-top:1rem;margin-top:1.2rem;}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.82rem 1.35rem;border-radius:999px;border:1px solid var(--akzent);background:var(--akzent);color:var(--akzent-auf);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;line-height:1.1;transition:background .18s,border-color .18s,color .18s,transform .12s;}
.knopf:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);}
.knopf:active{transform:translateY(1px);}
.knopf--linie{background:transparent;color:var(--tinte);border-color:var(--linie-2);}
.knopf--linie:hover{background:var(--tinte);border-color:var(--tinte);color:var(--grund);}

.kopf{position:sticky;top:0;z-index:80;background:rgba(251,250,248,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);}
.kopf__reihe{display:flex;align-items:center;gap:1rem;min-height:70px;padding-block:.65rem;}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;margin-right:auto;min-width:0;}
/* Logo auf heller Platte — das Original hat schwarze Schrift teils ueber dem
   grauen Dreieck, umgefaerbt waere sie dort unlesbar. Die Platte ist knapp
   bemessen, damit sie als Teil der Marke wirkt und nicht als Aufkleber. */
/* Auf hellem Grund braucht das Logo keine Platte — es steht direkt. */
.marke__platte{display:grid;place-items:center;flex:0 0 auto;}
.marke__platte img{height:34px;width:auto;display:block;}
.fuss__logo{display:flex;align-items:flex-start;}
.fuss__logo img{height:96px;width:auto;}
.fuss__logo img{height:110px;width:auto;display:block;}
@media (max-width:1120px){.marke__platte img{height:30px;}}
@media (max-width:700px){.fuss__logo img{height:76px;}}
.marke__text{display:grid;gap:.05rem;min-width:0;}
.marke__name{font-family:var(--display);font-weight:700;font-size:1.02rem;white-space:nowrap;}
.marke__zusatz{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--leise);white-space:nowrap;}
.kopf__nav{display:flex;align-items:center;gap:clamp(.45rem,1.5vw,1.2rem);flex-wrap:nowrap;}
.kopf__nav a{font-size:.79rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;text-decoration:none;color:var(--leise);padding:.45rem .1rem;white-space:nowrap;}
.kopf__nav a:hover{color:var(--tinte);}
.kopf__nav .kopf__ruf{background:var(--akzent);color:var(--akzent-auf);padding:.62rem 1rem;border-radius:999px;}
.nav-schalter{position:absolute;opacity:0;pointer-events:none;}
.nav-knopf{display:none;}
@media (max-width:1120px){.marke__zusatz{display:none}.kopf__nav{gap:.58rem}.kopf__nav a{font-size:.71rem;letter-spacing:.03em}.kopf__nav .kopf__ruf{padding:.55rem .85rem}}
@media (max-width:820px){
  .kopf__reihe{flex-wrap:wrap;min-height:64px;}
  .nav-knopf{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:8px;border:1px solid var(--linie-2);border-radius:var(--radius);}
  .nav-knopf span{height:2px;background:var(--tinte);}
  .kopf__nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:.7rem;}
  .kopf__nav a{padding:.86rem 0;border-top:1px solid var(--linie);}
  .kopf__nav .kopf__ruf{text-align:center;margin-top:.75rem;}
  .nav-schalter:checked ~ .kopf__nav{display:flex;}
}

.hero{border-bottom:1px solid var(--linie);position:relative;isolation:isolate;overflow:hidden;min-height:min(88vh,760px);display:flex;align-items:flex-end;padding-block:clamp(6rem,17vh,9rem) clamp(3rem,7vw,5rem);border-bottom:1px solid var(--linie);}
.hero__bild{position:absolute;inset:0;z-index:-2;}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:saturate(.72);}
/* Heller Seitengrund, aber der Hero traegt weisse Schrift auf dem Foto.
   Deshalb hier bewusst ein KRAEFTIGER dunkler Schleier von links, der nach
   rechts auslaeuft — und kein Verlauf ins Helle nach unten: der wusch die
   Schrift aus (03.08.2026 gemessen und verworfen). Unten schliesst der Hero
   mit einer Linie gegen den hellen Grund ab. */
.hero__schleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(22,15,18,.92) 0%,rgba(22,15,18,.80) 34%,rgba(22,15,18,.42) 62%,rgba(22,15,18,.18) 100%),
  linear-gradient(0deg,rgba(22,15,18,.55) 0%,rgba(22,15,18,.10) 34%,rgba(22,15,18,0) 60%);}
.hero h1,.hero .lead,.hero .schild{color:#FFFFFF;}
.hero .lead{color:#F0EBEC;}
.hero .schild{color:#F0C8D8;}
.hero h1{font-size:clamp(2rem,.95rem + 3.9vw,4.1rem);max-width:19ch;margin-bottom:1.05rem;}
.hero .lead{max-width:47ch;}
.hero__aktion{margin-top:2rem;}
@media (max-width:700px){.hero{min-height:min(92vh,720px)}.hero__schleier{background:linear-gradient(90deg,rgba(22,15,18,.92),rgba(22,15,18,.72)),linear-gradient(0deg,rgba(22,15,18,.6) 0%,rgba(22,15,18,0) 55%)}.hero h1{max-width:12.5ch}}
.hero .lead{color:#F0EBEC;}
.hero .schild{color:#F0C8D8;}
.hero h1{max-width:12.5ch}}

.auf{opacity:1;transform:none;}
.js .auf{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.js .auf.da{opacity:1;transform:none;}

.profil__gitter{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.profil__text{max-width:48rem;}
.profil__text h2{font-size:clamp(1.75rem,1.1rem + 2.2vw,3rem);margin-bottom:1rem;}
.profil__liste{display:grid;gap:1rem;}
.profil__liste article{border-top:1px solid var(--linie);padding-top:1.1rem;}
.profil__liste span{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:.4rem;color:var(--tinte);}
.profil__liste p{color:var(--leise);}
/* Die Ueberschrift bleibt stehen, waehrend die drei Punkte an ihr vorbeiziehen
   (03.08.2026 auf Ansage). Kleben darf nur die KUERZERE Spalte, sonst steht die
   lange Liste still und die Ueberschrift laeuft weg. align-self:start ist
   Pflicht: sonst zieht das Raster die Spalte auf die volle Zeilenhoehe, und
   sticky hat keine Strecke zum Kleben.
   Damit die Strecke spuerbar ist, bekommen die Punkte mehr Luft — bei fast
   gleich hohen Spalten waere der Effekt sonst nach 50 px vorbei. */
@media (min-width:900px){
  .profil__gitter{grid-template-columns:.9fr 1.1fr;align-items:start;}
  .profil__text{position:sticky;top:7rem;align-self:start;}
  .profil__liste{gap:1.6rem;}
  .profil__liste article{padding-block:1.5rem .6rem;}
}

.station{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start;}
@media (min-width:940px){.station{grid-template-columns:.82fr 1.18fr}.station__kopf{position:sticky;top:6rem;}}
.station__kopf h2{font-size:clamp(2rem,1.05rem + 3vw,3.55rem);margin-bottom:1rem;max-width:15ch;}
.fristrechner{border:1px solid var(--linie-2);border-radius:var(--radius);background:var(--flaeche);padding:clamp(1.2rem,3vw,2rem);}
.frist__eingabe label{display:block;font-weight:700;margin-bottom:.75rem;}
.frist__zeile{display:grid;grid-template-columns:1.3fr .7fr;gap:.8rem;margin-bottom:1rem;}
.frist__zeile select,.frist__zeile input{width:100%;min-height:48px;border-radius:var(--radius);border:1px solid var(--linie-2);background:#F3F1EE;color:var(--tinte);padding:.75rem .9rem;}
.hilfe{font-size:.9rem;color:var(--leise);}
.frist__ausgabe{display:grid;gap:.75rem;margin-top:1.4rem;padding:1.2rem;border-radius:var(--radius);background:#F3F1EE;border:1px solid var(--linie);}
.frist__zahl{font-family:var(--display);font-size:clamp(4rem,3rem + 4vw,7rem);line-height:.9;color:var(--akzent-txt);font-weight:700;font-variant-numeric:tabular-nums;}
.frist__label{color:var(--leise);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;}
.frist__ausgabe strong{font-size:clamp(1.3rem,1rem + 1.2vw,2rem);font-family:var(--display);line-height:1.12;}
.frist__ausgabe em{font-style:normal;color:var(--leise);}

/* ---- Zusagen: Liste statt Kachelwand ----
   Je Zeile eine Zusage: Nummer, Kurztitel, ein Satz. Auf breiten Schirmen
   stehen die drei Teile nebeneinander wie in einer Vertragsliste, darunter
   untereinander. Keine Kaesten, keine Absaetze — das war zu viel Text und sah
   aus wie jede andere Maklerseite. */
.zusagen{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--linie);}
.zusage{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;row-gap:.35rem;
  align-items:baseline;padding:1.25rem 0;border-bottom:1px solid var(--linie);}
.zusage__nr{grid-row:span 2;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.8rem;letter-spacing:.12em;color:var(--akzent-txt);padding-top:.35rem;}
.zusage__titel{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.2;}
.zusage__text{color:var(--leise);font-size:.98rem;line-height:1.55;}
@media (min-width:860px){
  .zusage{grid-template-columns:auto 20rem 1fr;column-gap:2rem;align-items:baseline;
    padding:1.5rem 0;}
  .zusage__nr{grid-row:auto;padding-top:.2rem;}
  .zusage__text{padding-top:.1rem;}
}
@media (hover:hover){
  .zusage{transition:padding-left .2s ease;}
  .zusage:hover{padding-left:.6rem;}
}

.bildband{height:clamp(260px,36vw,520px);overflow:hidden;border-block:1px solid var(--linie);background:#F3F1EE;}
.bildband img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.78);}

/* ---- Hausverwaltung: gebaut wie „Aktuelle Angebote" ----
   Kopf untereinander, darunter zwei gleich grosse Karten mit Stichpunkten,
   darunter der Kasten mit dem Anruf. Gleiche Bauform, gleiche Abstaende. */
.verwaltung__kopf .lead{max-width:56ch;margin-bottom:2.4rem;}
.portal--fest{cursor:default;}
.portal--fest:hover{border-color:var(--linie);background:var(--flaeche);transform:none;}
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.punkte li{position:relative;padding-left:1.15rem;color:var(--leise);
  font-size:.95rem;line-height:1.5;}
.punkte li::before{content:"";position:absolute;left:0;top:.62em;
  width:.45rem;height:1px;background:var(--akzent-txt);}

.referenzen .lead{margin-bottom:2rem;}
.referenzgrid{display:grid;grid-template-columns:1fr;gap:1rem;}
.referenzgrid figure{border:1px solid var(--linie);background:var(--flaeche);border-radius:var(--radius);overflow:hidden;}
.referenzgrid img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;filter:saturate(.78);}
.referenzgrid figcaption{padding:.95rem 1rem;color:var(--leise);font-size:.92rem;}
/* Alle Kacheln gleich gross (03.08.2026 auf Ansage): gleiches Seitenverhaeltnis
   im Bild, gleiche Kachelhoehe durch die Rasterzeile, kein Versatz mehr. */
.referenzgrid figure{display:flex;flex-direction:column;}
.referenzgrid figcaption{flex:1;}
@media (min-width:560px){.referenzgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:760px){.referenzgrid{grid-template-columns:repeat(4,minmax(0,1fr));}}

.bindung__gitter{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.bindung h2{font-size:clamp(2rem,1.05rem + 3vw,3.45rem);max-width:16ch;margin-bottom:1rem;}
.anliegenbox{border:1px solid var(--linie-2);background:var(--flaeche);border-radius:var(--radius);padding:clamp(1.2rem,3vw,2rem);}
.anliegenbox__frage{font-weight:700;margin-bottom:1rem;}
.wahl{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;}
.wahl button{min-height:44px;border:1px solid var(--linie-2);border-radius:999px;background:#F3F1EE;color:var(--leise);padding:.65rem 1rem;font-weight:700;transition:background .18s,border-color .18s,color .18s,transform .12s;}
.wahl button:hover,.wahl button:focus-visible{border-color:var(--akzent);color:var(--tinte);}
.wahl button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-auf);}
.wahl button:active{transform:translateY(1px);}
.anliegenbox__ausgabe{min-height:9rem;border-left:2px solid var(--akzent);padding-left:1rem;color:var(--leise);}
.anliegenbox__ausgabe strong{display:block;color:var(--tinte);font-family:var(--display);font-size:1.3rem;line-height:1.18;margin-bottom:.6rem;}
.anliegenbox__ausgabe ul{list-style:none;display:grid;gap:.45rem;margin-top:.8rem;}
.anliegenbox__ausgabe li{position:relative;padding-left:1rem;}
.anliegenbox__ausgabe li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:1px;background:var(--akzent);}
@media (min-width:900px){.bindung__gitter{grid-template-columns:.9fr 1.1fr}.anliegenbox{position:sticky;top:6rem;}}

.kontakt__gitter{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.kontakt h2{font-size:clamp(2rem,1.05rem + 3vw,3.45rem);max-width:15ch;margin-bottom:1rem;}
.kontakt__aktionen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}
/* ---- EIN Kontaktfeld, beide Firmierungen darin ----
   Oben die zwei Namen mit Rolle und Anschrift, darunter die Daten, die fuer
   beide gelten. So ist der Unterschied sofort sichtbar, ohne dass Telefon,
   Fax und Mail dreimal dastehen. */
.kontaktfeld{border:1px solid var(--linie-2);border-radius:var(--radius);
  background:var(--flaeche);padding:clamp(1.3rem,3vw,2rem);}
.kontaktfeld__firmen{display:grid;gap:1.4rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--linie);}
.firma{display:grid;gap:.3rem;}
.firma__rolle{font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent-txt);}
.firma__name{font-family:var(--display);font-size:1.3rem;line-height:1.15;}
.firma__ort{color:var(--leise);}
.kontaktfeld__daten{display:grid;gap:.55rem;margin:1.4rem 0 0;}
.kontaktfeld__daten > div{display:grid;grid-template-columns:7.5rem 1fr;gap:.4rem 1rem;
  align-items:baseline;}
.kontaktfeld__daten dt{font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leise);}
.kontaktfeld__daten dd{margin:0;color:var(--tinte);overflow-wrap:anywhere;}
.kontaktfeld__daten a{color:var(--akzent-txt);text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:24px;}
@media (min-width:760px){
  .kontaktfeld__firmen{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;}
}
@media (max-width:420px){
  .kontaktfeld__daten > div{grid-template-columns:1fr;}
}
@media (min-width:900px){.kontakt__gitter{grid-template-columns:1fr 1.05fr}}

.karte{position:relative;height:clamp(280px,38vw,460px);background:#F3F1EE;overflow:hidden;border-top:1px solid var(--linie);}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.karte__sperre{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:clamp(1.2rem,4vw,3rem);background:linear-gradient(135deg,#F7F5F2,#EFECE8);color:var(--tinte);}
.ks-frei .karte__sperre{display:none;}
.karte__sperre h2{font-size:clamp(1.5rem,1rem + 2vw,2.6rem);margin-bottom:.6rem;}
.karte__sperre p{color:var(--leise);max-width:44ch;}
.karte__aktionen{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end;}
@media (max-width:760px){.karte__sperre{align-items:flex-start;justify-content:center;flex-direction:column}.karte__aktionen{justify-content:flex-start}}

.fuss{border-top:1px solid var(--linie);background:var(--band);padding-block:clamp(2.6rem,6vw,4.5rem);}
.fuss__kopf{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;border-bottom:1px solid var(--linie);padding-bottom:1.5rem;margin-bottom:1.5rem;}
.fuss__marke{font-family:var(--display);font-size:1.5rem;font-weight:700;}
.fuss__kopf p{max-width:44ch;color:var(--leise);}
.fuss__gitter{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.fuss h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--akzent-txt);margin-bottom:.7rem;}
.fuss ul{list-style:none;display:grid;gap:.45rem;color:var(--leise);}
.fuss a{color:inherit;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px;}
.fuss__cookie{min-height:32px;padding:0;border:0;background:transparent;color:var(--leise);text-decoration:underline;text-underline-offset:3px;}
.fuss__zeile{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--leise);font-size:.86rem;}
@media (min-width:760px){.fuss__gitter{grid-template-columns:auto repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}}
@media (max-width:700px){.fuss__kopf{display:grid}.kopf__reihe{padding-inline:0}.marke__name{font-size:.95rem}.knopf{width:100%}.frist__zeile{grid-template-columns:1fr}}

/* ---- Aktuelle Angebote: Karten zu den eigenen Portalprofilen ---- */
.angebote .lead{max-width:56ch;margin-bottom:2.4rem;}
.portale{display:grid;gap:1rem;grid-template-columns:1fr;}
.portal{display:flex;flex-direction:column;gap:.6rem;min-height:11rem;padding:1.4rem;
  border:1px solid var(--linie);border-radius:var(--radius);background:var(--flaeche);
  text-decoration:none;color:inherit;
  transition:border-color .18s,background .18s,transform .12s;}
.portal:hover{border-color:var(--akzent);background:var(--band);transform:translateY(-2px);}
.portal__name{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;}
.portal__text{color:var(--leise);font-size:.95rem;line-height:1.6;flex:1;}
.portal__pfeil{color:var(--akzent-txt);font-weight:700;font-size:.85rem;
  letter-spacing:.04em;text-transform:uppercase;}
.gesuch{margin-top:1.6rem;padding:1.6rem;border:1px solid var(--linie-2);
  border-radius:var(--radius);background:var(--band);}
.gesuch h3{font-size:1.25rem;margin-bottom:.6rem;}
.gesuch p{color:var(--leise);margin-bottom:1.3rem;max-width:62ch;line-height:1.65;}
@media (min-width:760px){.portale{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gesuch{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
  .gesuch p{margin-bottom:0;flex:1 1 34rem;}
  .gesuch h3{flex-basis:100%;}}

.unterhero{padding-block:clamp(6rem,12vw,9rem) clamp(3rem,7vw,5rem);background:linear-gradient(135deg,#F7F5F2,#EFECE8);border-bottom:1px solid var(--linie);}
.unterhero h1{font-size:clamp(2.4rem,1.2rem + 4vw,4.8rem);margin-bottom:1rem;}
.krumen{display:flex;gap:.6rem;align-items:center;color:var(--leise);font-size:.9rem;margin-bottom:2rem;}
.krumen a{color:var(--akzent-txt);text-underline-offset:3px;}
.prosa{max-width:72ch;}
.prosa h2{font-size:1.45rem;margin:2rem 0 .6rem;}
.prosa p{color:var(--leise);margin-bottom:1rem;}
.prosa a{color:var(--akzent-txt);text-underline-offset:3px;}
.hinweis{border:1px solid var(--linie-2);background:var(--flaeche);border-radius:var(--radius);padding:1rem;margin-bottom:1.5rem;color:var(--leise);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .js .auf{opacity:1;transform:none;}
}