/* =====================================================================
   Sechser Immobilien — Gestaltung
   Firmenfarben aus dem Logo gemessen:
   Gold #C49F61 · Dunkelrot #8C1114 · Schwarz #0F0F0F · Weiß #FFFFFF
   ===================================================================== */

:root{
  --gold:#C49F61;
  --gold-hell:#E2C892;
  --gold-dunkel:#A8843F;
  --rot:#8C1114;
  --rot-dunkel:#6B0C0E;
  --schwarz:#0F0F0F;
  --weiss:#FFFFFF;
  --creme:#F7F4EF;
  --creme-tief:#EFEAE1;
  --linie:#E2DCD1;
  --text:#24211D;
  --grau:#6C665F;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --breite:1240px;
  --rand:clamp(20px,4.5vw,56px);
  --kopfhoehe:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--weiss);color:var(--text);
  font:400 17px/1.75 var(--sans);overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0;letter-spacing:.004em}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem)}
h3{font-size:1.55rem}
p{margin:0 0 1.15em}
strong{font-weight:600;color:var(--schwarz)}

.huelle{width:100%;max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:760px}
.mitte{text-align:center}
.gross{font-size:1.1rem;color:#3A352F}
.mini{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--grau);margin-bottom:1em}
.mini.gold{color:var(--gold-dunkel)}

.skip{position:absolute;left:-9999px;background:var(--schwarz);color:#fff;padding:12px 18px;z-index:300}
.skip:focus{left:12px;top:12px}

/* ----------------------------- Knöpfe ----------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 32px;border:1px solid transparent;border-radius:2px;
  font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:.25s ease;text-align:center;
}
.knopf-rot{background:var(--rot);color:#fff}
.knopf-rot:hover{background:var(--rot-dunkel)}
.knopf-gold{background:var(--gold);color:var(--schwarz)}
.knopf-gold:hover{background:var(--gold-hell)}
.knopf-gruen{background:#1FA855;color:#fff}
.knopf-gruen:hover{background:#18904A}
.knopf-rand{border-color:var(--schwarz);color:var(--schwarz);background:transparent}
.knopf-rand:hover{background:var(--schwarz);color:#fff}
.knopf.breit{width:100%}

/* ----------------------------- Kopfzeile ----------------------------- */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:var(--kopfhoehe);padding:10px var(--rand);
  background:var(--creme);border-bottom:1px solid var(--linie);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
/* Auf der Startseite liegen Logo und Striche zunaechst frei ueber dem Himmel.
   Die Leiste selbst erscheint erst, sobald man ein Stueck gescrollt hat. */
.startseite .kopf{background:transparent;border-bottom-color:transparent}
.startseite .kopf .marke img{filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(15,15,15,.45))}
.startseite .kopf .burger span{background:#fff;box-shadow:0 1px 8px rgba(15,15,15,.4)}
.startseite .kopf.fest{
  background:var(--creme);border-bottom-color:var(--linie);
  box-shadow:0 2px 18px -12px rgba(15,15,15,.4);
}
.startseite .kopf.fest .marke img{filter:none}
.startseite .kopf.fest .burger span{background:var(--schwarz);box-shadow:none}
.marke img{height:90px;width:auto;transition:height .25s ease}


.burger{
  width:52px;height:52px;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;gap:7px;background:none;border:0;cursor:pointer;padding:0;
}
.burger span{
  display:block;height:2px;width:36px;background:var(--schwarz);border-radius:2px;
  transition:transform .3s ease,opacity .2s ease,width .3s ease;
}
.burger span:nth-child(2){width:27px}
.burger[aria-expanded="true"] span{width:36px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ------------------- Menü: schiebt sich von rechts ein ---------------- */
.menue{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,88vw);z-index:130;
  background:var(--schwarz);color:#fff;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;overflow-y:auto;
}
.menue.offen{transform:none}
.menue-inhalt{width:100%;padding:clamp(40px,7vh,80px) clamp(28px,5vw,52px)}
.menue ul{list-style:none;margin:0;padding:0}
.menue li{border-bottom:1px solid rgba(255,255,255,.1)}
.menue li a{
  display:block;padding:clamp(12px,2.1vh,19px) 0;text-decoration:none;color:#fff;
  font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.2;
  transition:color .22s ease,padding-left .22s ease;
}
.menue li a:hover,.menue li a:focus{color:var(--gold);padding-left:10px}
.menue li a.jetzt{color:var(--gold)}
.menue-fuss{margin-top:34px;font-size:.9rem;color:rgba(255,255,255,.58);line-height:1.7}
.menue-fuss a{display:block;color:inherit;text-decoration:none;padding:2px 0}
.menue-fuss a:hover{color:var(--gold)}
.menue-fuss p{margin:12px 0 0}
.menue-schatten{position:fixed;inset:0;z-index:125;background:rgba(15,15,15,.45);
  opacity:0;transition:opacity .35s ease}
.menue-schatten.da{opacity:1}
body.menue-offen{overflow:hidden}

/* ----------------------- Titelbereich Startseite ----------------------
   Wie beim Vorbild: das Bild liegt ganz oben und reicht unter die Kopfleiste,
   der Firmenname steht im Himmel, der Text kommt DARUNTER.               */
.held{
  position:relative;margin-top:0;
  height:clamp(680px,132vh,1420px);overflow:hidden;background:var(--creme);
}
.held-bild{position:absolute;inset:0}
.held-bild picture{display:block;width:100%;height:100%}
.held-bild img{
  /* Ausschnitt ganz oben ansetzen: so bleibt ueber den Turmspitzen
     freier Himmel fuer den Schriftzug. */
  width:100%;height:100%;object-fit:cover;object-position:center 5%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
  animation:rauszoom 4s cubic-bezier(.16,.68,.3,1) both;
}

/* Schriftzug im Himmel — aufgebaut wie das Logo: Haarlinie, grosser Name,
   darunter gesperrt "Immobilien", wieder eine Haarlinie. */
.held-marke{
  position:absolute;left:50%;top:clamp(104px,14vh,168px);transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
  width:min(90vw,760px);text-align:center;color:#fff;
  animation:markeRein 1.5s .5s cubic-bezier(.22,.61,.36,1) both;
}
.held-gross{
  font-family:var(--serif);font-weight:500;line-height:1;
  font-size:clamp(3rem,8.2vw,6.4rem);letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 .2em;
  text-shadow:0 4px 44px rgba(15,15,15,.5),0 2px 8px rgba(15,15,15,.38);
}
.held-klein{
  font-family:var(--sans);font-weight:600;color:#fff;
  font-size:clamp(.78rem,1.9vw,1.25rem);letter-spacing:.56em;
  text-transform:uppercase;margin:0 0 0 .56em;white-space:nowrap;
  text-shadow:0 2px 18px rgba(15,15,15,.55);
}
/* Feine Linien links und rechts — wie im Logo selbst, das "IMMOBILIEN"
   ebenfalls zwischen zwei Striche setzt. */
.held-zeile{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);
  width:100%;margin-top:.5em;
}
.held-strich{
  display:block;flex:1 1 auto;max-width:clamp(48px,14vw,190px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-hell) 45%,var(--gold-hell) 55%,transparent);
  box-shadow:0 1px 6px rgba(15,15,15,.35);
}

@keyframes markeRein{
  from{opacity:0;transform:translateX(-50%) translateY(16px);letter-spacing:.2em}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

.held-unten{background:var(--creme);padding:clamp(6px,1.5vw,18px) 0 clamp(46px,7vw,88px)}
.held-unten h1{margin-bottom:.35em}
.held-satz{margin:0;font-size:1.12rem;color:#3A352F;max-width:28em}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:13px;margin-top:2.1em}
@keyframes rauszoom{from{transform:scale(1.26)}to{transform:scale(1)}}

/* ----------------------- Titelbereich Unterseiten --------------------- */
.seitenkopf{margin-top:var(--kopfhoehe);background:var(--creme);overflow:hidden}
.seitenkopf-raster{
  display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,5vw,68px);
  align-items:center;padding-top:clamp(38px,5.5vw,70px);padding-bottom:clamp(38px,5.5vw,70px);
}
.seitenkopf-text h1{margin-bottom:.3em}
.seitenkopf-text .gross{max-width:30em}
.seitenkopf-bild{overflow:hidden;border-radius:3px;box-shadow:0 24px 54px -34px rgba(15,15,15,.5)}
.seitenkopf-bild img{
  width:100%;height:auto;display:block;
  animation:rauszoom 2.4s cubic-bezier(.22,.61,.36,1) both;
}

/* ----------------------- Allgemeine Abschnitte ------------------------ */
.satz{padding:clamp(62px,9vw,116px) 0 clamp(30px,4vw,54px)}
.satz h2{margin-bottom:.5em}

.karten-abschnitt{padding:clamp(34px,5vw,70px) 0 clamp(62px,9vw,116px)}
.karten-kopf{margin-bottom:clamp(28px,4vw,50px)}
.karten-kopf h2{margin-bottom:.45em}
.leistungskarten{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.lkarte{
  display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--linie);border-radius:3px;padding:30px 26px 26px;
  background:var(--weiss);transition:.25s ease;
}
.lkarte:hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 16px 36px -24px rgba(15,15,15,.45)}
.lkarte-nr{font-size:.7rem;letter-spacing:.2em;color:var(--gold-dunkel);font-weight:600;margin-bottom:14px}
.lkarte h3{margin-bottom:.45em}
.lkarte p{font-size:.97rem;color:var(--grau);flex:1}
.lkarte-mehr{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--rot);margin-top:12px}

.text-abschnitt{padding:clamp(56px,8vw,102px) 0}
.zwei{display:grid;gap:clamp(30px,4.5vw,64px);grid-template-columns:1.35fr .9fr;align-items:start}
.zwei h2{margin-bottom:.6em}

.ruf-kasten{
  position:sticky;top:calc(var(--kopfhoehe) + 24px);
  background:var(--creme);border:1px solid var(--linie);border-radius:3px;
  padding:28px 26px;
}
.ruf-text{font-size:.98rem;color:var(--grau)}
.ruf-tel{display:block;margin-top:14px;text-align:center;font-size:.9rem;
  color:var(--rot);text-decoration:none}
.ruf-tel:hover{text-decoration:underline}

.merkmale{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:2em 0 0}
.merkmale div{border-left:2px solid var(--gold);padding-left:15px}
.merkmale strong{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1;color:var(--schwarz)}
.merkmale span{font-size:.84rem;color:var(--grau)}

/* Tippgeber-Satz: ruhig gesetzt, Zahl in der Grotesk statt als Riesenzahl */
.satzkasten{
  display:flex;gap:22px;align-items:flex-start;
  border:1px solid var(--linie);border-left:3px solid var(--gold);
  background:var(--creme);border-radius:3px;padding:24px 26px;margin-bottom:2.4em;
}
.satzkasten-wert{
  font-family:var(--sans);font-weight:600;font-size:1.85rem;letter-spacing:-.01em;
  color:var(--rot);white-space:nowrap;line-height:1.2;
}
.satzkasten-text{font-size:.98rem;color:var(--grau);line-height:1.7}

.schritte{list-style:none;margin:1.6em 0 0;padding:0}
.schritte li{display:flex;gap:15px;align-items:flex-start;padding:10px 0;font-size:1rem}
.schritte span{
  flex:0 0 30px;height:30px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;color:var(--gold-dunkel);font-size:.8rem;font-weight:600;
}

/* --------------------- Kontaktband (auf jeder Seite) ------------------ */
.band{background:var(--creme);border-top:1px solid var(--linie);padding:clamp(50px,7vw,88px) 0}
.band h2{margin-bottom:.4em}
.band-inhalt{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1.1fr .9fr;align-items:center}
.band-text{margin:0;color:var(--grau)}
.band-wege{display:flex;flex-direction:column;gap:12px}
.band-direkt{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:2px;padding:15px 20px;
  text-decoration:none;transition:.22s ease;
}
.band-direkt:hover{border-color:var(--gold);transform:translateX(4px)}
.band-direkt span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dunkel)}
.band-direkt strong{font-weight:500;font-size:.98rem;word-break:break-word}

/* ----------------------------- Kontaktseite --------------------------- */
.kontaktseite{padding:calc(var(--kopfhoehe) + clamp(46px,7vw,86px)) 0 clamp(56px,8vw,100px)}
.kontakt-kopf{max-width:680px;margin-bottom:clamp(34px,5vw,58px)}
.kontakt-kopf h1{margin-bottom:.4em}
.kontakt-raster{display:grid;gap:clamp(26px,3.5vw,46px);grid-template-columns:.85fr 1.15fr;align-items:start}
.kontakt-spalte{display:grid;gap:13px}
.kkarte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:3px;
  padding:20px 22px;text-decoration:none;display:flex;flex-direction:column;gap:6px;
  transition:.22s ease;
}
a.kkarte:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 12px 26px -20px rgba(15,15,15,.4)}
.kkarte-marke{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dunkel);font-weight:600}
.kkarte strong{font-size:1.04rem;line-height:1.45;word-break:break-word}
.kkarte-los{font-size:.8rem;color:var(--rot);font-weight:600}
.kkarte-grau{color:var(--grau);font-weight:400}

.formular{background:var(--creme);border:1px solid var(--linie);border-radius:3px;
  padding:clamp(24px,3.2vw,38px)}
.formular-titel{font-family:var(--serif);font-size:1.75rem;margin-bottom:.12em}
.formular-vor{color:var(--grau);font-size:.95rem;margin-bottom:1.6em}

.thema-wahl{border:0;padding:0;margin:0 0 22px}
.thema-wahl legend{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--grau);padding:0;margin-bottom:11px}
.thema-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.thema-knoepfe label{cursor:pointer}
.thema-knoepfe input{position:absolute;opacity:0;width:0;height:0}
.thema-knoepfe span{
  display:inline-block;padding:9px 16px;border:1px solid var(--linie);border-radius:100px;
  background:var(--weiss);font-size:.86rem;color:var(--grau);transition:.2s ease;
}
.thema-knoepfe label:hover span{border-color:var(--gold)}
.thema-knoepfe input:checked + span{background:var(--schwarz);border-color:var(--schwarz);color:#fff}
.thema-knoepfe input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

.feld{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--grau);margin-bottom:17px}
.feld input,.feld textarea{
  display:block;width:100%;margin-top:8px;padding:14px 15px;
  font:400 16px/1.5 var(--sans);color:var(--text);
  background:var(--weiss);border:1px solid var(--linie);border-radius:2px;
  text-transform:none;letter-spacing:normal;
}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.feld textarea{resize:vertical;min-height:120px}
.feld-paar{display:grid;gap:0 16px;grid-template-columns:1fr 1fr}
.pflicht{color:var(--rot)}
.haekchen{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;
  color:var(--grau);line-height:1.6;margin-bottom:20px}
.haekchen input{width:19px;height:19px;flex:0 0 19px;margin:2px 0 0;accent-color:var(--rot)}
.haekchen a{color:var(--rot)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .knopf + .knopf{margin-top:10px}
.formular-hinweis{font-size:.8rem;color:var(--grau);margin:1.1em 0 0;text-align:center;line-height:1.6}
.formular-melden{margin:1em 0 0;font-size:.95rem;font-weight:600;text-align:center}
.formular-melden.ok{color:#1D7A4C}
.formular-melden.fehler{color:var(--rot)}

.karte-block{margin-top:clamp(34px,5vw,58px)}
.karte-platz{position:relative;min-height:330px;border-radius:3px;overflow:hidden;
  border:1px solid var(--linie);background:var(--creme-tief);display:grid;place-items:center;text-align:center}
.karte-platz iframe{width:100%;height:420px;border:0;display:block}
.karte-hinweis-block{padding:38px 26px;max-width:470px}
.karte-titel{font-family:var(--serif);font-size:1.45rem;margin-bottom:.5em}
.karte-hinweis-block p{font-size:.92rem;color:var(--grau)}
.karte-hinweis-block .knopf{margin-top:.5em}
.karte-route{display:block;margin-top:16px;font-size:.88rem;color:var(--rot);text-decoration:none}
.karte-route:hover{text-decoration:underline}

/* ----------------------------- Fußzeile ------------------------------- */
.fuss{background:var(--schwarz);color:rgba(255,255,255,.6);
  padding:clamp(50px,7vw,82px) 0 24px;font-size:.92rem}
.fuss-raster{display:grid;gap:32px;grid-template-columns:1.5fr 1fr 1fr 1fr}
.fuss-logo{height:70px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:16px}
.fuss-titel{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:1em}
.fuss a{display:block;color:rgba(255,255,255,.6);text-decoration:none;padding:4px 0}
.fuss a:hover{color:var(--gold-hell)}
.fuss-text{color:rgba(255,255,255,.45);line-height:1.7;margin:10px 0 0}
.fuss-unten{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;color:rgba(255,255,255,.4)}
.fuss-unten p{margin:0}
.fuss-unten a{display:inline}
.hoch{text-decoration:none}

/* ----------------------------- Rechtliche Seiten ---------------------- */
.recht{padding:calc(var(--kopfhoehe) + 50px) 0 clamp(56px,8vw,96px)}
.recht h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:1em}
.recht h2{font-size:1.38rem;margin:2.1em 0 .55em;padding-top:.8em;border-top:1px solid var(--linie)}
.recht h2:first-of-type{border-top:0;padding-top:0}
.recht p,.recht li{font-size:1rem;line-height:1.8}
.recht ul{padding-left:1.15em;margin:0 0 1.15em}
.recht a{color:var(--rot)}
.recht .knopf-rot{color:#fff}
.recht .chef-wege a{color:var(--text)}
.recht .chef-wege a:hover{color:var(--rot)}
.recht mark{background:#FFF3C4;color:#5B4A00;padding:2px 5px;border-radius:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.klein{font-size:.88rem;color:var(--grau)}
.offen-hinweis{background:#FFF8E6;border:1px solid #E8D9A8;border-left:4px solid var(--gold);
  border-radius:3px;padding:16px 18px;font-size:.95rem;line-height:1.65}

/* ----------------------------- Einblenden ----------------------------- */
.zeig{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.zeig.da{opacity:1;transform:none}

/* ----------------------- Schmale Bildschirme -------------------------- */
@media (max-width:1000px){
  .zwei,.kontakt-raster,.band-inhalt{grid-template-columns:1fr}
  .ruf-kasten{position:static}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--kopfhoehe:84px}
  .marke img{height:66px}
  /* Auf dem Handy bleibt die Telefonnummer sichtbar, die Mailadresse
     waere zu lang — sie steht im Menue und im Kontaktband. */
  .kopf-kontakt{display:flex}
  .kopf-mail{display:none}
  .kopf-tel{font-size:.86rem;font-weight:600}
  .kopf-strich{display:none}
  .kopf-rechts{gap:14px}
  .held{grid-template-columns:1fr}
  .held-bild{order:-1;min-height:min(58vh,520px)}
  .held-text{padding:clamp(34px,7vw,56px) var(--rand);margin-left:0;max-width:none}
  .seitenkopf-schleier{background:linear-gradient(180deg,rgba(15,15,15,.5) 0%,rgba(15,15,15,.84) 100%)}
}
@media (max-width:640px){
  body{font-size:16px}
  .feld-paar{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr}
  .satzkasten{flex-direction:column;gap:12px}
  .held-knoepfe .knopf{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .zeig{opacity:1;transform:none}
}
@media print{
  .kopf,.menue,.menue-schatten,.band,.fuss{display:none}
  .recht,.kontaktseite{padding-top:0}
}


/* ----------------------- Bild-und-Text-Block -------------------------- */
.bildblock{padding:clamp(52px,7.5vw,100px) 0;background:var(--creme)}
.bildblock.gedreht{background:var(--weiss)}
.bildblock-raster{display:grid;gap:clamp(30px,4.5vw,66px);
  grid-template-columns:1fr 1fr;align-items:center}
.bildblock.gedreht .bildblock-bild{order:2}
.bildblock-bild img{width:100%;height:100%;min-height:300px;object-fit:cover;
  border-radius:3px;box-shadow:0 22px 48px -30px rgba(15,15,15,.55)}
.bildblock-text h2{margin-bottom:.55em}

.haken{list-style:none;margin:1.4em 0 0;padding:0}
.haken li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--linie);font-size:1rem}
.haken li:last-child{border-bottom:0}
.haken li::before{content:"";position:absolute;left:2px;top:16px;width:11px;height:6px;
  border-left:2px solid var(--gold-dunkel);border-bottom:2px solid var(--gold-dunkel);
  transform:rotate(-45deg)}

/* ----------------------------- Zitat ---------------------------------- */
.zitat{background:var(--creme-tief);padding:clamp(56px,8vw,104px) 0;text-align:center}
.zitat-text{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.3;margin:0 0 .6em;color:var(--schwarz)}
.zitat-quelle{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dunkel);margin:0;font-weight:600}

/* ----------------------------- Gebiet --------------------------------- */
.gebiet{padding:clamp(56px,8vw,100px) 0 clamp(20px,3vw,40px)}

@media (max-width:1000px){
  .bildblock-raster{grid-template-columns:1fr}
  .bildblock.gedreht .bildblock-bild{order:0}
}
@media (max-width:820px){
  .held{height:auto;min-height:0;display:block}
  .held-voll{position:relative;inset:auto;height:min(64vh,560px);padding:0;display:block}
  .held-voll img{width:100%;height:100%;max-width:100%;max-height:none;
    object-fit:cover;object-position:center 30%}
  .held-grund{display:none}
  .held-schleier{display:none}

}

/* ----------------------------- Karte auf der Startseite --------------- */
.karte-flaeche{
  display:grid;grid-template-columns:1.55fr .45fr;gap:20px;align-items:stretch;
  margin-top:clamp(26px,4vw,44px);
}
.karte-bild{
  position:relative;display:block;border:1px solid var(--linie);border-radius:3px;
  overflow:hidden;text-decoration:none;
}
.karte-bild img{width:100%;height:100%;object-fit:cover;min-height:320px;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.karte-bild:hover img{transform:scale(1.04)}
.karte-fahne{
  position:absolute;left:18px;bottom:18px;background:var(--weiss);
  border-left:3px solid var(--rot);border-radius:2px;padding:12px 18px;
  font-size:.88rem;color:var(--grau);line-height:1.5;
  box-shadow:0 12px 30px -16px rgba(15,15,15,.5);
}
.karte-fahne strong{display:block;font-size:1rem;color:var(--schwarz);margin-bottom:2px}
.karte-seite{
  background:var(--creme);border:1px solid var(--linie);border-radius:3px;
  padding:26px 24px;display:flex;flex-direction:column;justify-content:center;
}
.karte-adresse{font-family:var(--serif);font-size:1.35rem;line-height:1.45;margin-bottom:1.1em}
.karte-alt{display:block;margin-top:14px;font-size:.88rem;color:var(--rot);text-decoration:none}
.karte-alt:hover{text-decoration:underline}
.karte-quelle{font-size:.74rem;color:var(--grau);margin:18px 0 0}

/* ----------------------------- Bewegung ------------------------------- */
/* Seitenwechsel: kurz ausblenden, damit der Klick sich anfuehlt wie ein
   Uebergang statt wie ein harter Sprung. */
body{opacity:0;animation:reinblenden .5s ease forwards}
@keyframes reinblenden{to{opacity:1}}
body.geht{opacity:0;transition:opacity .28s ease}

/* Unterstrich waechst beim Darueberfahren */
.menue li a,.fuss a,.lkarte,.kkarte,.band-direkt{position:relative}
.menue li a::after{
  content:"";position:absolute;left:0;bottom:10px;height:1px;width:0;
  background:var(--gold);transition:width .3s ease;
}
.menue li a:hover::after{width:34px}

/* Knoepfe bekommen beim Darueberfahren einen leichten Schub */
.knopf{position:relative;overflow:hidden}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}

/* Bilder in den Bloecken ziehen beim Darueberfahren leicht an */
.bildblock-bild,.seitenkopf-bild,.held-bild{overflow:hidden}
.bildblock-bild img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.bildblock-bild:hover img{transform:scale(1.035)}

/* Leistungskarten: Pfeil wandert */
.lkarte-mehr{transition:transform .25s ease;display:inline-block}
.lkarte:hover .lkarte-mehr{transform:translateX(5px)}

@media (max-width:1000px){
  .karte-flaeche{grid-template-columns:1fr}
}
@media (max-width:820px){
  .seitenkopf-raster{grid-template-columns:1fr}
  .seitenkopf-bild{order:-1}
  .held{height:clamp(600px,116vh,1080px)}
  .held-bild img{object-position:center 7%}
  .held-marke{top:clamp(112px,14vh,170px);width:min(88vw,520px)}
  .held-gross{font-size:clamp(2.5rem,12vw,3.7rem)}
  .held-klein{font-size:.72rem;letter-spacing:.46em}
  .karte-bild img{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  body{opacity:1;animation:none}
  body.geht{opacity:1}
  .knopf:hover{transform:none}
}

/* =====================================================================
   Handy-Feinschliff
   Apple und Google empfehlen mindestens 44 Punkt fuer alles, was man mit
   dem Daumen trifft. Darunter vertippt man sich staendig.
   ===================================================================== */
html{scroll-padding-top:calc(var(--kopfhoehe) + 12px)}

@media (max-width:820px){
  /* Telefonnummer oben: richtige Tippflaeche statt nackter Text */
  .kopf-tel{
    display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
    border:1px solid var(--linie);border-radius:100px;background:var(--weiss);
  }
  .kopf-tel:active{background:var(--creme-tief)}

  /* Alle Links in Fusszeile, Kontaktkasten und Karte gross genug */
  .fuss a,.ruf-tel,.karte-alt,.hoch,.fuss-unten a{
    min-height:44px;display:flex;align-items:center;
  }
  .fuss-unten a,.hoch{justify-content:flex-start}
  .ruf-tel,.karte-alt{justify-content:center}
  .fuss a{padding:2px 0}

  /* Haekchen im Formular: groesser und mit mehr Platz drumherum */
  .haekchen{padding:10px 0;gap:14px}
  .haekchen input{width:24px;height:24px;flex:0 0 24px;margin-top:1px}
  .haekchen a{display:inline;min-height:0;padding:2px 0}

  /* Themenknoepfe bequem treffbar */
  .thema-knoepfe span{padding:12px 18px;font-size:.92rem}

  /* Kartenschild nach oben, damit es die Markierung nicht verdeckt */
  .karte-fahne{left:12px;right:12px;bottom:auto;top:12px;padding:11px 14px}
  .karte-bild img{min-height:300px;object-position:center 58%}

  /* Menue: Punkte und Kontaktzeilen mit mehr Luft */
  .menue li a{padding-top:16px;padding-bottom:16px}
  .menue-fuss a{min-height:44px;display:flex;align-items:center}
}

@media (max-width:480px){
  .kopf-tel{font-size:.8rem;padding:0 10px}
  .marke img{height:52px}
  .karte-adresse{font-size:1.25rem}
  /* Auf sehr schmalen Geraeten Knoepfe ueber die volle Breite */
  .band-wege .knopf,.held-knoepfe .knopf{width:100%}
}

/* ----------------------------- Werbespruch ----------------------------
   Soll ins Auge fallen, nicht nur dastehen: eigener Farbgrund, feine
   Goldlinie, zweite Zeile in Gold, beide Zeilen fahren nacheinander ein. */
.spruch{
  background:var(--creme-tief);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  padding:clamp(40px,5.2vw,74px) 0;overflow:hidden;
}
.spruch-inhalt{text-align:center;position:relative}
.spruch-strich{
  display:block;width:1px;height:clamp(24px,3.2vw,38px);margin:0 auto 18px;
  background:linear-gradient(180deg,transparent,var(--gold));
}
.spruch-satz{
  font-family:var(--serif);font-weight:500;line-height:1.06;margin:0;
  font-size:clamp(2.2rem,5.6vw,3.9rem);color:var(--schwarz);
}
.spruch-satz span,.spruch-satz em{display:block;font-style:normal}
.spruch-satz em{color:var(--gold-dunkel)}
.spruch-zusatz{
  margin:1.1em auto 0;max-width:30em;font-size:1rem;color:var(--grau);
}
/* Die beiden Zeilen fahren nacheinander ein */
.spruch-satz span,.spruch-satz em{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
}
.spruch-inhalt.da .spruch-satz span{opacity:1;transform:none}
.spruch-inhalt.da .spruch-satz em{opacity:1;transform:none;transition-delay:.22s}
@media (prefers-reduced-motion:reduce){
  .spruch-satz span,.spruch-satz em{opacity:1;transform:none}
}

/* --------------------------- Geschäftsführer -------------------------- */
.chef{padding:clamp(56px,8vw,100px) 0}
.chef-band{background:var(--creme);border-top:1px solid var(--linie)}
.chef-bild{
  width:clamp(170px,20vw,220px);height:clamp(170px,20vw,220px);
  margin:0 auto 24px;border-radius:50%;overflow:hidden;
  border:3px solid var(--weiss);box-shadow:0 18px 40px -22px rgba(15,15,15,.55);
}
.chef-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.chef-name{font-family:var(--serif);font-size:1.75rem;margin:0 0 .1em;color:var(--schwarz)}
.chef-rolle{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dunkel);font-weight:600;margin:0 0 1.5em}
.chef-wege{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:center;margin-bottom:1.8em}
.chef-wege a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:1.02rem;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--linie);transition:.2s ease;
}
.chef-wege a:hover{color:var(--rot);border-bottom-color:var(--rot)}

/* Geschäftsführer im Impressum */
.recht .chef{padding:clamp(28px,4vw,44px) 0 0;text-align:center}
.recht .chef-bild{width:150px;height:150px}