/* =====================================================================
   Verhoeven Immobilien – Stylesheet
   Farben & Typografie abgeleitet von der Visitenkarte
   ===================================================================== */

:root{
  /* Markenfarben */
  --blau:        #2b3a9b;   /* Kartenblau (Vorderseite) */
  --blau-tief:   #1c2670;   /* dunklere Variante */
  --blau-tinte:  #141c52;   /* fast schwarz-blau, fuer Text */
  --lila:        #8a97dc;   /* Lila-/Flieder-Ton des Schriftzugs */
  --lila-hell:   #a8b1e8;
  --lila-zart:   #dfe3f7;
  --creme:       #efe9bd;   /* Cremegelb der Kontaktdaten */
  --papier:      #f5f3ea;   /* heller Seitenhintergrund */
  --weiss:       #ffffff;

  /* Masse */
  --kopf-h:      76px;
  --kopf-h-m:    62px;
  --bund:        clamp(20px, 5vw, 72px);   /* seitlicher Rand */
  --max:         1280px;
  --radius:      2px;

  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--kopf-h); }
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  color:var(--blau-tinte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.02; letter-spacing:-.035em; font-weight:700; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--bund); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
          clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Typo-Skala (Visitenkarten-Look: eng, fett, klein geschrieben) ---------- */
.wortmarke{
  font-weight:700;
  letter-spacing:-.045em;
  text-transform:lowercase;
  line-height:.86;
}
.riese{ font-size:clamp(2.6rem,9.2vw,7.6rem); }
.gross{ font-size:clamp(2rem,4.6vw,3.6rem); }
.mittel{ font-size:clamp(1.5rem,2.6vw,2.1rem); }

.augbraue{                       /* kleine Ueberschrift ueber Sektionen */
  font-size:.78rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; margin:0 0 18px; color:var(--blau);
  display:flex; align-items:center; gap:14px;
}
.augbraue::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.28; }
.blau-flaeche .augbraue,
.tief-flaeche .augbraue,
.buehne .augbraue{ color:var(--lila); }

.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.55; max-width:62ch; }

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:15px 30px; border:2px solid var(--blau); background:var(--blau); color:var(--creme);
  font-weight:700; font-size:.98rem; letter-spacing:-.01em; text-decoration:none;
  border-radius:var(--radius); cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--blau-tief); border-color:var(--blau-tief); transform:translateY(-2px); }
.btn--linie{ background:transparent; color:var(--blau); }
.btn--linie:hover{ background:var(--blau); color:var(--creme); }
/* Auf allen blauen Flaechen kehren sich die Schaltflaechen um */
.blau-flaeche .btn, .tief-flaeche .btn, .buehne .btn{
  background:var(--creme); border-color:var(--creme); color:var(--blau-tief);
}
.blau-flaeche .btn:hover, .tief-flaeche .btn:hover, .buehne .btn:hover{
  background:var(--lila); border-color:var(--lila); color:var(--blau-tief);
}
.blau-flaeche .btn--linie, .tief-flaeche .btn--linie, .buehne .btn--linie{
  background:transparent; color:var(--creme); border-color:var(--lila);
}
.blau-flaeche .btn--linie:hover, .tief-flaeche .btn--linie:hover, .buehne .btn--linie:hover{
  background:var(--lila); color:var(--blau-tief);
}

/* =====================================================================
   Kopfbereich – bleibt beim Scrollen immer oben
   ===================================================================== */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--kopf-h);
  background:var(--blau);
  border-bottom:1px solid rgba(239,233,189,.18);
  transition:height .25s ease, background .25s ease, box-shadow .25s ease;
}
.kopf.geschrumpft{ height:var(--kopf-h-m); box-shadow:0 10px 34px rgba(20,28,82,.28); }

.kopf__innen{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--bund);
}
.kopf__logo{
  text-decoration:none; color:var(--lila);
  font-size:clamp(1.25rem,2.5vw,1.75rem);
  white-space:nowrap; transition:color .18s ease;
}
.kopf__logo:hover{ color:var(--lila-hell); }
.kopf__logo b{ font-weight:700; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,32px); }
.nav a{
  color:var(--creme); text-decoration:none; font-size:.95rem; font-weight:500;
  letter-spacing:-.01em; padding:6px 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--lila); transition:right .25s ease;
}
.nav a:hover::after, .nav a.aktiv::after{ right:0; }
.nav .nav__tel{
  border:2px solid var(--lila); color:var(--lila); padding:9px 18px; border-radius:var(--radius);
  font-weight:700; transition:background .18s ease,color .18s ease;
}
.nav .nav__tel::after{ display:none; }
.nav .nav__tel:hover{ background:var(--lila); color:var(--blau-tief); }

/* Menue-Knopf (mobil) */
.burger{
  display:none; width:46px; height:38px; background:none; border:0; cursor:pointer;
  padding:0; position:relative;
}
.burger span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--creme);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:19px; }
.burger span:nth-child(3){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:19px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:19px; transform:rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    position:fixed; top:var(--kopf-h-m); left:0; right:0;
    background:var(--blau-tief); flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--bund) 26px;
    transform:translateY(-140%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - var(--kopf-h-m)); overflow:auto;
    box-shadow:0 24px 40px rgba(20,28,82,.35);
  }
  .nav.offen{ transform:translateY(0); }
  .nav a{ padding:15px 0; font-size:1.15rem; border-bottom:1px solid rgba(239,233,189,.14); }
  .nav a::after{ display:none; }
  .nav .nav__tel{ margin-top:20px; text-align:center; border-bottom:2px solid var(--lila); }
  .kopf{ height:var(--kopf-h-m); }
}

/* Abstandhalter, damit der fixe Kopf nichts ueberdeckt */
.kopf-platz{ height:var(--kopf-h); }
@media (max-width:900px){ .kopf-platz{ height:var(--kopf-h-m); } }

/* =====================================================================
   Sektionen
   ===================================================================== */
section{ padding:clamp(64px,9vw,130px) 0; position:relative; }
.blau-flaeche{ background:var(--blau); color:var(--creme); }
.blau-flaeche h2,.blau-flaeche h3{ color:var(--creme); }
.tief-flaeche{ background:var(--blau-tief); color:var(--creme); }
.helle-flaeche{ background:var(--weiss); }

/* ---------- Buehne / Hero ---------- */
.buehne{
  background:var(--blau); color:var(--creme);
  padding:clamp(56px,8vw,104px) 0 0; overflow:hidden; position:relative;
}
.buehne__raster{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
}
.buehne h1{ color:var(--creme); margin-bottom:26px; }
.buehne h1 em{ font-style:normal; color:var(--lila); display:block; }
.buehne__text{ color:var(--creme); opacity:.92; max-width:46ch; }
.buehne__aktionen{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.buehne__bild{ position:relative; }
.buehne__bild img{
  width:100%; height:min(66vh,620px); object-fit:cover; object-position:50% 40%;
  border-radius:var(--radius);
}

/* grosser, angeschnittener Schriftzug wie auf der Karte */
.schriftband{
  margin-top:clamp(34px,5vw,66px);
  margin-bottom:-.2em;                 /* Schriftzug laeuft unten aus dem Bild – wie auf der Karte */
  line-height:1; color:var(--lila); opacity:.55;
  font-size:clamp(4rem,17vw,15rem);
  white-space:nowrap; user-select:none; pointer-events:none;
  margin-left:calc(var(--bund) * -1);
}
@media (max-width:860px){
  .buehne__raster{ grid-template-columns:1fr; }
  .buehne__bild{ order:-1; }
  .buehne__bild img{ height:min(42vh,340px); }
}

/* ---------- Kennzahlen-Band ---------- */
.band{ background:var(--lila); color:var(--blau-tief); padding:clamp(30px,4vw,46px) 0; }
.band__raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px; }
.band__zelle strong{ display:block; font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:700;
                     letter-spacing:-.04em; line-height:1; margin-bottom:6px; }
.band__zelle span{ font-size:.92rem; font-weight:500; opacity:.85; }

/* ---------- Leistungen ---------- */
.leistungen__raster{ display:grid; grid-template-columns:1fr;
                     gap:clamp(18px,2.2vw,28px); margin-top:46px; }
@media (min-width:760px){ .leistungen__raster{ grid-template-columns:repeat(2,1fr); } }
.karte{
  background:var(--weiss); border:1px solid rgba(43,58,155,.14);
  padding:clamp(26px,3vw,38px); border-radius:var(--radius);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex; flex-direction:column;
}
.karte:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(43,58,155,.14); border-color:var(--lila); }
.karte__nr{
  font-size:.8rem; font-weight:700; letter-spacing:.2em; color:var(--lila);
  margin-bottom:20px; display:block;
}
.karte h3{ font-size:1.45rem; margin-bottom:14px; letter-spacing:-.03em; }
.karte p{ font-size:.98rem; color:#43506e; margin-bottom:18px; }
.karte ul{ margin-top:auto; border-top:1px solid rgba(43,58,155,.12); padding-top:16px; }
.karte li{ font-size:.94rem; padding:7px 0 7px 22px; position:relative; color:#43506e; }
.karte li::before{
  content:""; position:absolute; left:0; top:15px; width:10px; height:2px; background:var(--lila);
}

/* ---------- Objekte / Galerie ---------- */
.galerie{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,22px); margin-top:46px; }
.objekt{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--blau-tief); grid-column:span 4;
}
.objekt--breit{ grid-column:span 8; }
.objekt__bild{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.objekt--breit .objekt__bild{ aspect-ratio:16/9; }
.objekt:hover .objekt__bild{ transform:scale(1.045); }
.objekt__info{
  position:absolute; inset:auto 0 0 0; padding:clamp(18px,2.4vw,28px);
  background:linear-gradient(to top, rgba(20,28,82,.96) 22%, rgba(20,28,82,.62) 62%, rgba(20,28,82,0) 100%);
  color:var(--creme);
}
.objekt__info h3{ font-size:clamp(1.15rem,1.7vw,1.5rem); margin-bottom:4px; }
.objekt__info span{ font-size:.88rem; letter-spacing:.06em; text-transform:uppercase; color:var(--lila-hell); }
@media (max-width:820px){
  .objekt, .objekt--breit{ grid-column:span 12; }
}

/* ---------- Ablauf ---------- */
.ablauf{ counter-reset:schritt; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
         gap:clamp(20px,3vw,34px); margin-top:52px; }
.schritt{ position:relative; padding-top:26px; border-top:2px solid var(--lila); }
.schritt::before{
  counter-increment:schritt; content:"0" counter(schritt);
  font-size:2.6rem; font-weight:700; letter-spacing:-.05em; color:var(--lila);
  display:block; line-height:1; margin-bottom:14px;
}
.schritt h3{ font-size:1.2rem; margin-bottom:10px; }
.schritt p{ font-size:.95rem; opacity:.86; margin:0; }

/* ---------- Ueber / Profil ---------- */
.profil{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:center; }
.profil__bild{ position:relative; }
.profil__bild img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:52% 50%;
  border-radius:var(--radius);
}
.zitat{
  border-left:3px solid var(--lila); padding-left:22px; margin:30px 0 0;
  font-size:1.1rem; line-height:1.5; font-style:italic;
}
.zitat cite{ display:block; margin-top:12px; font-style:normal; font-size:.88rem;
             letter-spacing:.12em; text-transform:uppercase; color:var(--lila); }
@media (max-width:860px){
  .profil{ grid-template-columns:1fr; }
  .profil__bild img{ aspect-ratio:3/2; }   /* auf dem Handy breiter statt hoch */
}

/* =====================================================================
   Kontakt
   ===================================================================== */
.kontakt__raster{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,70px); }
@media (max-width:900px){ .kontakt__raster{ grid-template-columns:1fr; } }

.daten{ font-size:1.05rem; }
.daten dt{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lila);
  margin-top:26px; margin-bottom:6px; font-weight:700;
}
.daten dt:first-of-type{ margin-top:0; }
.daten dd{ margin:0; font-weight:500; }
.daten a{ color:var(--creme); text-decoration:none; border-bottom:1px solid rgba(239,233,189,.35);
          transition:color .18s ease, border-color .18s ease; }
.daten a:hover{ color:var(--lila); border-color:var(--lila); }

/* Formular */
.formular{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feld{ display:flex; flex-direction:column; gap:8px; }
.feld--voll{ grid-column:1 / -1; }
.feld label{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--lila); }
.feld input, .feld textarea, .feld select{
  font-family:inherit; font-size:1rem; color:var(--creme);
  background:rgba(255,255,255,.06); border:1px solid rgba(239,233,189,.28);
  padding:14px 16px; border-radius:var(--radius); transition:border-color .18s ease, background .18s ease;
}
.feld textarea{ min-height:150px; resize:vertical; }
.feld select{
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a97dc' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.feld input:focus, .feld textarea:focus, .feld select:focus{
  outline:none; border-color:var(--lila); background:rgba(255,255,255,.11);
}
.feld input::placeholder, .feld textarea::placeholder{ color:rgba(239,233,189,.42); }
.feld select option{ background:var(--blau-tief); color:var(--creme); }
.honig{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.zustimmung{ grid-column:1/-1; display:flex; gap:12px; align-items:flex-start; font-size:.86rem; line-height:1.5; }
.zustimmung input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--lila); }
.zustimmung a{ color:var(--lila); }
@media (max-width:620px){ .formular{ grid-template-columns:1fr; } }

.hinweis{ font-size:.82rem; opacity:.7; margin-top:14px; }

/* =====================================================================
   Fussbereich
   ===================================================================== */
.fuss{ background:var(--blau-tief); color:var(--creme); padding-top:clamp(50px,6vw,80px); overflow:hidden; }
.fuss__raster{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px; padding-bottom:44px; }
.fuss h4{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lila); margin-bottom:16px; }
.fuss a{ color:var(--creme); text-decoration:none; opacity:.85; }
.fuss a:hover{ opacity:1; color:var(--lila); }
.fuss li{ padding:5px 0; font-size:.95rem; }
.fuss__unten{
  border-top:1px solid rgba(239,233,189,.16); padding:22px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:.85rem; opacity:.72;
}
.fuss__schrift{
  line-height:.78; color:var(--lila); opacity:.16;
  font-size:clamp(3.4rem,15vw,13rem); white-space:nowrap; user-select:none;
  margin-left:calc(var(--bund) * -1); padding-bottom:10px;
}
@media (max-width:760px){ .fuss__raster{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Nach-oben-Knopf ---------- */
.hoch{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:52px; height:52px; border-radius:50%; border:2px solid var(--lila);
  background:var(--blau); color:var(--creme); cursor:pointer;
  display:grid; place-items:center; font-size:1.2rem;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .18s ease;
}
.hoch.sichtbar{ opacity:1; visibility:visible; transform:translateY(0); }
.hoch:hover{ background:var(--lila); color:var(--blau-tief); }

/* ---------- Inhaltsseiten (Impressum/Datenschutz) ---------- */
.inhalt{ max-width:78ch; }
.inhalt h1{ margin-bottom:34px; }
.inhalt h2{ font-size:1.35rem; margin:40px 0 12px; letter-spacing:-.02em; }
.inhalt h3{ font-size:1.05rem; margin:26px 0 8px; }
.inhalt p, .inhalt li{ font-size:1rem; color:#3c476a; }
.inhalt ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }
.inhalt li{ padding:3px 0; }
.inhalt a{ color:var(--blau); }
.platzhalter{
  background:#fff6d6; border-left:4px solid #e0b400; padding:14px 18px; margin:18px 0;
  font-size:.92rem; color:#5a4600;
}

/* ---------- Einblend-Animation ----------
   Nur wenn JavaScript laeuft. Ohne JS bleibt alles sofort sichtbar. */
.js .auf{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .auf.da{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .auf{ opacity:1; transform:none; }
}