/* ==========================================================================
   hd+ gmbh – Immobilienverwaltung Mannheim
   Stylesheet für alle Seiten
   --------------------------------------------------------------------------
   FARBEN ändern: ausschließlich im :root-Block direkt unterhalb.
   An keiner anderen Stelle der Datei stehen Farbwerte.
   ========================================================================== */

/* ========================= SCHRIFT =========================
   Lato, mitgeliefert in assets/fonts/, SIL Open Font License 1.1
   (Lizenztext: assets/fonts/OFL.txt).
   Keine externe Verbindung, kein Google-Fonts-Aufruf.
   =========================================================== */
@font-face{
  font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/lato-300.woff") format("woff");
}
@font-face{
  font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/lato-400.woff") format("woff");
}
@font-face{
  font-family:"Lato";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/lato-600.woff") format("woff");
}
@font-face{
  font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/lato-700.woff") format("woff");
}

:root{
  /* --- Markenfarben ---------------------------------------------------- */
  --dark:         #1a1215;   /* Primär, sehr dunkles Rotbraun */
  --dark-2:       #2a1b1f;   /* Flächen, Hover                */
  --dark-3:       #9a2a22;   /* Linien, Icons                 */
  --steel:        #8d7c7e;   /* gedecktes Warmgrau            */
  --tint:         #fdefed;   /* helle Rotfläche               */
  --accent:       #c0392f;   /* Akzent                        */
  --accent-dark:  #9a2a22;
  --accent-light: #e4675a;   /* Akzent auf dunklem Grund      */
  --dark-pale:    #d7c3c5;   /* helle Schrift auf Dunkel      */
  --dark-rgb:     26,18,21;  /* = --dark als RGB-Tripel,
                                für Bildverläufe und Muster.
                                Bei Änderung von --dark hier
                                denselben Ton eintragen.       */

  /* --- Neutrale Töne --------------------------------------------------- */
  --ink:          #1c1e22;
  --ink-soft:     #5a626c;
  --line:         #e0dad8;
  --line-soft:    #efeae8;
  --bg:           #ffffff;
  --bg-alt:       #fbf7f6;

  --maxw:         1240px;
  --gut:          32px;
  --header-h:     88px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:112px}
body{
  margin:0;
  font-family:"Lato","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.7;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--dark-3);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}

h1,h2,h3,h4{margin:0 0 .55em;font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--dark)}
h1{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,2.9vw,2.3rem);letter-spacing:-.025em}
h3{font-size:1.26rem}
h4{font-size:1.02rem;letter-spacing:0}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.2em}
li{margin-bottom:.4em}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:44px 0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:12px 22px;font-weight:700}
.skip:focus{left:0;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ========================= LABEL / KICKER ========================= */
.kicker{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.kicker::after{content:"";display:block;width:44px;height:2px;background:var(--accent);margin-top:12px}
.kicker--light{color:var(--accent-light)}
.kicker--light::after{background:var(--accent-light)}
.kicker--plain::after{display:none}

/* ========================= BUTTONS =========================
   Grundzustand: roter Grund, weiße Schrift.
   Mouseover:    weißer Grund, roter Rahmen, rote Schrift.
   Der Rahmen ist immer vorhanden (im Grundzustand in Grundfarbe),
   damit beim Überfahren nichts um einen Pixel springt.
   =========================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 29px;cursor:pointer;border-radius:0;
  border:1px solid var(--accent);
  background:var(--accent);color:#fff;font:inherit;font-weight:700;
  font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transition:background .16s,color .16s,border-color .16s;
  /* Weiß auf Rot wird sonst zu dünn gerendert */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.btn:hover,.btn:focus-visible{background:#fff;color:var(--accent);border-color:var(--accent);text-decoration:none}
.btn svg{width:15px;height:15px;flex:0 0 auto}

.btn--dark{background:var(--dark);border-color:var(--dark)}
.btn--dark:hover,.btn--dark:focus-visible{background:#fff;color:var(--dark);border-color:var(--dark)}

.btn--outline{background:transparent;color:var(--dark);border-color:var(--dark)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--dark);color:#fff;border-color:var(--dark)}

.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--onDark:hover,.btn--onDark:focus-visible{background:#fff;color:var(--accent);border-color:#fff}

.btn--sm{padding:11px 21px;font-size:.84rem;letter-spacing:.04em}
.btn--link{background:none;border:0;padding:0;color:var(--dark);border-bottom:2px solid var(--accent)}
.btn--link:hover{background:none;color:var(--accent);text-decoration:none}
.btn--block{width:100%;justify-content:center}
.btn-row{display:flex;flex-wrap:wrap;gap:0}
.btn-row .btn + .btn{margin-left:-1px}

/* ========================= TOPBAR ========================= */
.topbar{background:var(--dark);color:#fff;font-size:.8rem;letter-spacing:.03em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;
  justify-content:flex-end;min-height:38px}
.topbar a{color:rgba(255,255,255,.78)}
.topbar a:hover{color:#fff;text-decoration:none}
.topbar .tb-left{margin-right:auto;display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
.topbar .tb-left span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78)}
.topbar .tb-left a{color:#fff;font-weight:600}
.topbar svg{width:13px;height:13px;flex:0 0 auto;opacity:.7}
/* Schmale Bildschirme: die Kopfleiste bricht sonst unschoen um.
   Oeffnungszeiten sowie Impressum und Datenschutz entfallen dort –
   beides steht vollstaendig im Fussbereich. */
@media (max-width:760px){
  .topbar .tb-left span:nth-child(2){display:none}
  .topbar .wrap > a[href$="impressum.html"],
  .topbar .wrap > a[href$="datenschutz.html"]{display:none}
  .topbar .wrap{justify-content:center;flex-wrap:nowrap;gap:0 20px}
  .topbar .tb-left{margin-right:0;flex-wrap:nowrap}
}
@media (max-width:360px){
  .topbar .wrap > a[href^="mailto:"]{display:none}
}

/* ========================= HEADER ========================= */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:stretch;gap:28px;min-height:var(--header-h)}
.logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;padding:8px 0}
.logo:hover{text-decoration:none}
.logo img{height:54px;width:auto;display:block}
@media (max-width:560px){.logo img{height:42px}}

.nav{margin-left:auto;display:flex;align-items:stretch}
.nav a{
  display:flex;align-items:center;padding:0 15px;
  font-size:.83rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dark);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;transition:.15s;
}
.nav a:hover{color:var(--accent);border-bottom-color:var(--line);text-decoration:none}
.nav a.is-active{border-bottom-color:var(--accent);color:var(--accent)}
/* Der Kontakt-Button im Kopf soll die Button-Regeln behalten, nicht die
   der übrigen Menüpunkte. Ohne die Farbangaben hier gewinnt ".nav a"
   nach Spezifität und färbt die Schrift dunkel statt weiß. */
.nav .btn{margin:14px 0 14px 18px;border:1px solid var(--accent);
  background:var(--accent);color:#fff}
.nav .btn:hover,.nav .btn:focus-visible{background:#fff;color:var(--accent);border-color:var(--accent)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:12px;cursor:pointer;align-self:center}
.burger span{display:block;width:26px;height:2px;background:var(--dark);margin:6px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:0;border-bottom:1px solid var(--line);display:none}
  .nav.is-open{display:flex}
  .nav a{padding:16px var(--gut);border-bottom:1px solid var(--line-soft);border-left:3px solid transparent}
  .nav a:hover,.nav a.is-active{border-bottom-color:var(--line-soft);border-left-color:var(--accent)}
  .nav .btn{margin:18px var(--gut) 24px;justify-content:center}
}

/* ========================= START-HERO ========================= */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .imgslot,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(var(--dark-rgb),.94) 0%,rgba(var(--dark-rgb),.86) 46%,rgba(var(--dark-rgb),.55) 100%)}
.hero .wrap{position:relative;z-index:2;padding:112px var(--gut) 0}
.hero-copy{max-width:62ch}
.hero h1{color:#fff;margin-bottom:.4em}
.hero h1 .thin{font-weight:300;color:var(--dark-pale);display:block}
.hero .lead{font-size:1.16rem;color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:36px}

.hero-facts{position:relative;z-index:2;margin-top:88px;
  border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr)}
.hero-facts div{padding:26px 26px 30px;border-right:1px solid rgba(255,255,255,.18)}
.hero-facts div:first-child{padding-left:0}
.hero-facts div:last-child{border-right:0}
.hero-facts b{display:block;font-size:2rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff}
.hero-facts span{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
@media (max-width:900px){
  .hero .wrap{padding-top:72px}
  .hero-facts{grid-template-columns:repeat(2,1fr);margin-top:56px}
  .hero-facts div{border-bottom:1px solid rgba(255,255,255,.18);padding:20px 20px 22px}
  .hero-facts div:nth-child(2n){border-right:0}
  .hero-facts div:nth-child(1),.hero-facts div:nth-child(3){padding-left:0}
  .hero-facts div:nth-child(3),.hero-facts div:nth-child(4){border-bottom:0}
  .hero-facts b{font-size:1.6rem}
}
/* Sehr schmale Geraete: "Leistungsbereiche" lief sonst aus der Spalte */
@media (max-width:420px){
  .hero-facts div{padding:18px 12px 20px}
  .hero-facts span{font-size:.68rem;letter-spacing:.05em;hyphens:manual}
}

/* ========================= SEITEN-KOPF (Unterseiten) ========================= */
.page-hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.page-hero .page-bg{position:absolute;inset:0;z-index:0}
.page-hero .page-bg .imgslot,.page-hero .page-bg img{width:100%;height:100%;object-fit:cover}
.page-hero .page-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(var(--dark-rgb),.95) 0%,rgba(var(--dark-rgb),.88) 52%,rgba(var(--dark-rgb),.68) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding:52px var(--gut) 62px}
.page-hero h1{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:.4em}
.page-hero .lead{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:62ch;margin-bottom:0}
@media (max-width:760px){.page-hero .wrap{padding:34px var(--gut) 42px}}

.breadcrumb{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:22px}
.breadcrumb a{color:rgba(255,255,255,.72)}
.breadcrumb a:hover{color:#fff;text-decoration:none}
.breadcrumb .sep{padding:0 9px;opacity:.5}

/* ========================= SECTIONS ========================= */
.section{padding:88px 0}
.section--alt{background:var(--bg-alt)}
.section--tint{background:var(--tint)}
.section--dark{background:var(--dark);color:rgba(255,255,255,.84)}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark a{color:var(--accent-light)}
.section--tight{padding:64px 0}
@media (max-width:760px){.section{padding:56px 0}.section--tight{padding:44px 0}}

.section-head{max-width:66ch;margin-bottom:52px}
.section-head p{font-size:1.08rem;color:var(--ink-soft);margin-bottom:0}
.section--dark .section-head p{color:rgba(255,255,255,.72)}
.section-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gut);align-items:end}
@media (max-width:860px){.section-head{margin-bottom:34px}
  .section-head--split{grid-template-columns:1fr;align-items:start;gap:12px}}

/* ========================= INHALTS-LAYOUT ========================= */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gut);align-items:start}
.layout--wide{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.layout{grid-template-columns:1fr;gap:44px}}
.prose{max-width:76ch}
.prose > h2{margin-top:2em}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose > h3{margin-top:1.8em}
.prose > h4{margin-top:1.7em;color:var(--dark)}
.prose img{margin:28px 0}
.prose ul{padding-left:1.15em}
.prose li::marker{color:var(--accent)}
.prose .note{border-left:3px solid var(--accent);padding:4px 0 4px 22px;color:var(--ink-soft);margin:28px 0}

.aside{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:980px){.aside{position:static}}
.aside > *{background:#fff;padding:26px 24px;margin:0}
.aside figure{padding:0;background:var(--tint)}
.aside figure .ph{position:relative;aspect-ratio:4/3}
.aside figure .imgslot,.aside figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aside figcaption{padding:16px 22px 20px;font-size:.88rem;color:var(--ink-soft);background:#fff}
.aside h3{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);margin-bottom:14px}
.aside p{font-size:.95rem;color:var(--ink-soft)}
.aside p:last-child{margin-bottom:0}
.aside ul{list-style:none;padding:0;margin:0;font-size:.95rem}
.aside li{margin-bottom:.5em}
.aside li:last-child{margin-bottom:0}

.figblock{margin:0}
.figblock .ph{position:relative;aspect-ratio:16/9;background:var(--tint)}
.figblock .imgslot,.figblock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.figblock figcaption{padding:14px 0 0;font-size:.88rem;color:var(--ink-soft)}

/* ========================= LEISTUNGS-KACHELN ========================= */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-right:0;background:#fff}
.tiles > article{border-right:1px solid var(--line);padding:40px 34px 38px;transition:background .18s}
.tiles > article:hover{background:var(--bg-alt)}
.tiles .ic{width:44px;height:44px;color:var(--dark-3);margin-bottom:26px}
.tiles .ic svg{width:100%;height:100%}
.tiles h3{margin-bottom:.5em}
.tiles p{color:var(--ink-soft);margin-bottom:22px}
.tiles ul{color:var(--ink-soft);font-size:.96rem;margin-bottom:22px}
@media (max-width:900px){.tiles{grid-template-columns:1fr;border-right:1px solid var(--line)}
  .tiles > article{border-right:0;border-bottom:1px solid var(--line);padding:32px 26px}
  .tiles > article:last-child{border-bottom:0}}

/* ========================= FEATURE-ZEILEN ========================= */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.feature + .feature{border-top:1px solid var(--line)}
.feature > figure{margin:0;position:relative;min-height:420px;background:var(--tint)}
.feature > figure .imgslot,.feature > figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature > .feature-copy{padding:72px 64px;display:flex;flex-direction:column;justify-content:center}
.feature--flip > figure{order:2}
.feature .flabel{display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-size:.76rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--steel)}
.feature .flabel svg{width:26px;height:26px;color:var(--dark-3);flex:0 0 auto}
.feature h2{font-size:clamp(1.45rem,2.3vw,1.95rem)}
.feature p{color:var(--ink-soft)}
.feature ul{color:var(--ink-soft)}
.feature .btn{align-self:flex-start;margin-top:14px}
@media (max-width:1000px){
  .feature{grid-template-columns:1fr}
  .feature > figure{min-height:300px;order:0 !important}
  .feature > .feature-copy{padding:44px var(--gut) 52px}
}

/* ========================= ZEITLEISTE / SCHRITTE ========================= */
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);max-width:900px}
.timeline > li{position:relative;display:grid;grid-template-columns:118px 1fr;gap:28px;
  padding:0 0 34px 34px}
.timeline > li:last-child{padding-bottom:0}
.timeline .year{font-weight:700;font-size:.95rem;color:var(--dark);letter-spacing:.02em}
.timeline .mark{position:absolute;left:-5px;top:9px;width:9px;height:9px;background:var(--accent)}
.timeline .body p{margin:0;color:var(--ink-soft)}
.timeline .body h3{font-size:1.08rem;margin-bottom:.35em}
@media (max-width:700px){.timeline > li{grid-template-columns:1fr;gap:4px;padding-left:24px}}

/* ========================= LINK-LEISTE ========================= */
.linkbar{display:flex;flex-wrap:wrap;gap:0;list-style:none;padding:0;margin:22px 0 0}
.linkbar li{margin:0}
.linkbar a{display:block;padding:11px 20px;border:1px solid var(--line);margin:-1px 0 0 -1px;
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dark);background:#fff;text-decoration:none;transition:.15s}
.linkbar a:hover{background:var(--dark);color:#fff;border-color:var(--dark);
  text-decoration:none;position:relative;z-index:1}

/* ========================= GALERIE ========================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line)}
.gallery figure{margin:0;background:#fff;display:flex;flex-direction:column}
.gallery figure > .ph{position:relative;aspect-ratio:4/3;background:var(--tint)}
.gallery figure > .ph .imgslot,.gallery .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery figcaption{padding:20px 22px 24px;font-size:.92rem;line-height:1.6;color:var(--ink-soft);flex:1}
.gallery figcaption b{display:block;color:var(--dark);margin-bottom:4px}
/* Reine Fotogalerie: Kacheln ohne Bildtext, etwas kleineres Raster */
.gallery--fotos{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gallery--fotos figure{background:var(--line)}

/* ========================= KONTAKT ========================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:#fff}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-col{padding:48px 44px}
.contact-col + .contact-col{border-left:1px solid var(--line)}
@media (max-width:900px){.contact-col{padding:36px 26px}
  .contact-col + .contact-col{border-left:0;border-top:1px solid var(--line)}}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:grid;grid-template-columns:30px 1fr;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--line-soft)}
.contact-list li:first-child{padding-top:0}
.contact-list li:last-child{border-bottom:0}
.contact-list svg{width:20px;height:20px;color:var(--dark-3);margin-top:5px}
.contact-list b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);margin-bottom:6px;font-weight:700}
.contact-list a{color:var(--dark)}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;font-size:.96rem}
.hours li:last-child{border-bottom:0}
.hours span:first-child{font-weight:600;color:var(--dark)}
.label-sm{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  font-weight:700;margin-bottom:14px}

/* ========================= KONTAKTAUFNAHME ========================= */
.contact-cta{border:1px solid var(--line);border-top:0;background:var(--bg-alt);
  padding:44px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media (max-width:900px){.contact-cta{grid-template-columns:1fr;padding:32px 26px}}
.contact-cta h3{margin-bottom:.4em}
.contact-cta p{color:var(--ink-soft);margin-bottom:0;max-width:52ch}
.contact-actions{display:flex;flex-wrap:wrap;gap:0}
.contact-actions .btn + .btn{margin-left:-1px}

/* ========================= SERVICE-BAND ========================= */
.band{background:var(--dark-2);color:#fff;padding:64px 0}
.band .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.band h2{color:#fff;margin-bottom:.3em}
.band p{margin:0;color:rgba(255,255,255,.75)}
@media (max-width:860px){.band{padding:48px 0}.band .wrap{grid-template-columns:1fr;gap:26px}}

/* ========================= FOOTER ========================= */
.site-footer{background:var(--dark);color:rgba(255,255,255,.66);font-size:.94rem}
.site-footer h2{color:#fff;font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16);font-weight:700}
.site-footer a{color:rgba(255,255,255,.66)}
.site-footer a:hover{color:#fff;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding:72px 0 56px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px;padding:52px 0 40px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding:24px 0;
  display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;
  font-size:.82rem;letter-spacing:.03em;color:rgba(255,255,255,.5)}

/* ========================= RECHTSSEITEN ========================= */
.legal{max-width:80ch}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:2.2em;padding-top:26px;
  border-top:1px solid var(--line)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{margin-top:1.8em;font-size:1.1rem}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;margin:0 0 22px}
.legal dt{font-weight:700;color:var(--dark)}
.legal dd{margin:0;color:var(--ink-soft)}
@media (max-width:620px){.legal dl{grid-template-columns:1fr;gap:2px 0}
  .legal dd{margin-bottom:12px}}
.legal .stand{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--steel)}

/* ========================= BESTÄTIGUNGSSEITE ========================= */
.thanks{padding:96px 0 104px;text-align:center}
.thanks .ic{width:64px;height:64px;margin:0 auto 26px;background:var(--tint);color:var(--accent);
  display:grid;place-items:center}
.thanks .ic svg{width:30px;height:30px}
.thanks p{max-width:54ch;margin-left:auto;margin-right:auto;color:var(--ink-soft)}

/* ========================= FOTOFLAECHEN =========================
   Die Fotos werden unveraendert in Originalfarbe gezeigt. Der Rahmen
   haelt nur das Seitenverhaeltnis und beschneidet ueberstehende Raender.
   In der Galerie weist ein leichtes Heranzoomen darauf hin, dass sich
   das Bild anklicken laesst.
   ================================================================ */
.feature > figure,
.gallery figure > .ph,
.aside figure .ph,
.figblock .ph{position:relative;background:var(--dark);overflow:hidden;isolation:isolate}

.feature > figure img,
.gallery figure > .ph img,
.aside figure .ph img,
.figblock .ph img{transition:transform .8s var(--ease)}

@media (hover:hover){
  .gallery figure > .ph:hover img{transform:scale(1.04)}
}

/* ========================= BILD-PLATZHALTER ========================= */
.imgslot{display:block;width:100%;height:100%}
.imgslot.is-missing{
  background:var(--tint);
  background-image:linear-gradient(135deg,rgba(var(--dark-rgb),.055) 25%,transparent 25%,
    transparent 50%,rgba(var(--dark-rgb),.055) 50%,rgba(var(--dark-rgb),.055) 75%,transparent 75%);
  background-size:12px 12px;
  display:grid;place-items:center;text-align:center;padding:16px;min-height:110px;
}
.imgslot.is-missing img{display:none}
.imgslot.is-missing::after{content:"Bild folgt";font-size:.72rem;font-weight:600;
  letter-spacing:.05em;color:var(--steel);line-height:1.5;word-break:break-word}
.hero-bg .imgslot.is-missing,.page-hero .page-bg .imgslot.is-missing{background:var(--dark-2);background-image:none}
.hero-bg .imgslot.is-missing::after,.page-hero .page-bg .imgslot.is-missing::after{content:""}

/* ========================= ZURÜCK NACH OBEN ========================= */
.totop{position:fixed;right:0;bottom:0;z-index:70;width:50px;height:50px;border:0;
  background:var(--dark);color:#fff;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s,background .15s}
.totop:hover{background:var(--accent)}
.totop.show{opacity:1;visibility:visible}
.totop svg{width:20px;height:20px}

/* ========================= SCHMALE BILDSCHIRME ========================= */
@media (max-width:560px){
  :root{--gut:22px}
  .hero .btn-row,.band .btn-row,.contact-actions{display:grid;grid-template-columns:1fr}
  .hero .btn-row .btn,.band .btn-row .btn,.contact-actions .btn{
    margin:-1px 0 0 0;justify-content:center;text-align:center}
  .hero .wrap{padding-top:56px}
  .hero .lead{font-size:1.06rem}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}
@media print{
  .topbar,.site-header,.totop,.band{display:none}
  .page-hero,.hero{background:#fff;color:#000}
  .page-hero h1,.hero h1{color:#000}
  .aside{display:none}
  a{color:#000}
}

/* ========================= LIGHTBOX =========================
   Klick auf ein Galeriebild zeigt das Foto gross. Reines CSS/JS,
   keine Bibliothek. Schliessen per X, Escape oder Klick daneben.
   ============================================================ */
.gallery--fotos .ph{cursor:zoom-in}
.gallery--fotos .ph:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

body.lb-offen{overflow:hidden}

.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(6px,2vw,24px);padding:clamp(14px,4vw,48px);
  background:rgba(var(--dark-rgb),.975);
  opacity:0;transition:opacity .25s var(--ease);
}
.lightbox.is-offen{display:grid;opacity:1}

.lb-buehne{grid-column:2;margin:0;display:flex;align-items:center;justify-content:center;min-width:0}
.lb-buehne img{
  max-width:100%;max-height:82vh;width:auto;height:auto;
  object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:lb-auf .3s var(--ease);
}
@keyframes lb-auf{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.lb-zu,.lb-pfeil{
  background:none;border:1px solid rgba(255,255,255,.3);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.lb-zu svg,.lb-pfeil svg{width:22px;height:22px}
.lb-zu:hover,.lb-pfeil:hover,
.lb-zu:focus-visible,.lb-pfeil:focus-visible{background:var(--accent);border-color:var(--accent)}

.lb-zu{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);width:46px;height:46px}
.lb-pfeil{width:52px;height:52px;flex:none}
.lb-vor{grid-column:1}
.lb-nach{grid-column:3}

.lb-zaehler{
  position:absolute;left:0;right:0;bottom:clamp(10px,3vw,26px);margin:0;
  text-align:center;color:rgba(255,255,255,.72);
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
}

@media (max-width:640px){
  .lightbox{grid-template-columns:1fr;padding:56px 10px 64px}
  .lb-buehne{grid-column:1}
  .lb-buehne img{max-height:72vh}
  .lb-pfeil{position:absolute;bottom:clamp(10px,3vw,26px);width:46px;height:46px}
  .lb-vor{grid-column:1;left:14px}
  .lb-nach{grid-column:1;right:14px}
  .lb-zaehler{bottom:26px}
}

@media (prefers-reduced-motion:reduce){
  .lightbox{transition:none}
  .lb-buehne img{animation:none}
}