/* =======================
   TUMU BAU – Styles (clean, responsive)
   ======================= */

/* Farben / Variablen */
:root{
  --bg:#ffffff; --panel:#ffffff; --muted:#6b7280; --text:#0f172a;
  --line:#e5e7eb;

  --brand:#1ea0ff;       /* Lichtblau */
  --brand2:#0d47d9;      /* Dunkelblau */
  --accent:#ff6600;      /* Orange (Akzent) */

  --dark:#1a1a1a;        /* Kontakt/Footerdunkel */

  /* Tweaks, die du bequem anpassen kannst */
  --contactLeftShift:18px;   /* linke Kontaktspalte auf Desktop nach unten schieben */
  --contactDataSize:1.22rem; /* Kontakt-Daten Schriftgröße */
}

/* Basics */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1150px;margin:0 auto;padding:24px}
.small{font-size:.92rem}.muted{color:var(--muted)}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Headline-Typo */
h1,h2{font-family:"Bebas Neue", Impact, "Arial Narrow Bold", sans-serif; letter-spacing:.6px; text-transform:uppercase}
h1{line-height:.9; font-size:clamp(48px,9vw,112px)}
h2{font-size:clamp(30px,5.4vw,58px)}

/* ===== Topbar (schwarz) ===== */
.topbar{position:sticky; top:0; z-index:100; background:#111; color:#e5e7eb; border-bottom:1px solid rgba(255,255,255,.08)}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0}
.topbar-left{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.sc-label{color:#fff; font-weight:900}
.topbar-link{color:#fff; text-decoration:none; font-size:.95rem}
.topbar-link:hover{text-decoration:underline}
.sep{opacity:.6}
.topbar-right{display:flex; gap:10px}
.topbar-icon{width:22px; height:22px; display:inline-block; background:center/contain no-repeat}
.topbar-icon.ig{background-image:url('../icons/instagram.svg')}
.topbar-icon.fb{background-image:url('../icons/facebook.svg')}
.topbar-icon:hover{transform:translateY(-1px)}

/* ===== Marken-Header ===== */
.brand-header{background:#fff; border-bottom:1px solid #e5e7eb}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; position:relative}
.brand{ display:flex; align-items:center; gap:28px; text-decoration:none }
.brand-logo{width:120px; height:auto}
.brand-words{line-height:1.1; text-align:left}
.brand-title{display:flex; align-items:baseline; gap:12px; white-space:nowrap}
.brand-tumu,.brand-bau{font-family:"Bebas Neue"; font-size:64px; letter-spacing:.8px}
.brand-tumu{color:#101010}
.brand-bau{color:#101010 !important}  /* BAU schwarz (Header) */
.dash{font-family:"Bebas Neue"; font-size:58px; color:#101010; margin:0 2px}
.brand-sub{letter-spacing:4px; font-weight:900; font-size:18px; color:#6b7280; margin-top:6px}

/* Navigation */
.main-nav{display:flex; gap:28px; align-items:center; flex-wrap:wrap}
.main-nav a{color:#0f172a; text-decoration:none; font-weight:800}
.main-nav a:hover{color:var(--brand2)}
.main-nav .cta{background:var(--brand); color:#fff; padding:10px 16px; border-radius:12px}
.main-nav .cta:hover{filter:brightness(.95)}

/* Hamburger-Toggle (mobil) */
.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  font-size:32px; line-height:1; padding:6px 10px; border-radius:8px; color:#0f172a;
}
.nav-toggle:focus{outline:2px solid #cbd5e1; outline-offset:2px}

/* ===== Buttons ===== */
.actions{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#0f172a;font-weight:800;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--brand),#60a5fa);border:none;color:#fff}
.btn.big{padding:14px 22px;font-size:1.05rem;border-radius:14px}

/* ===== HERO – Fullscreen Background (robust auf Mobile) ===== */
html, body { overflow-x: hidden; }

.hero--image{
  position: relative;
  left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw;

  /* sichere Höhen für alle Browser */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  background:
    url('../img/hero.jpg?v=8') top center / cover no-repeat,
    #0b1530;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate; overflow:hidden;
  background-attachment:scroll;        /* kein fixed auf Mobile */
}
@supports (-webkit-touch-callout:none){
  .hero--image{ min-height:-webkit-fill-available; }
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hero--image{ background-attachment:fixed; } /* Parallaxe nur Desktop */
}

/* Abdunklung */
.hero--image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.28) 60%,
    rgba(10,20,38,.85) 100%);
}

/* Mobile: Fokus & Höhe leicht anpassen, damit mehr Motiv sichtbar ist */
@media (max-width: 768px){
  .hero--image{
    background-position: 65% 0;  /* zeigt mehr vom relevanten Bereich */
    min-height: 86svh;
  }
}
@supports (-webkit-touch-callout:none){
  .hero--image{ min-height: calc(86svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
/* sehr schmale Geräte */
@media (max-width:480px){
  .hero--image{ background-position: 70% 0; }
}

.scroll-cue{position:absolute; left:50%; bottom:64px; transform:translateX(-50%); background:transparent; border:2px solid rgba(255,255,255,.85); width:44px; height:44px; border-radius:999px; color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; z-index:2}

/* ===== ÜBER UNS ===== */
.about-free{ position:relative; background:#fff; padding:80px 0 120px; overflow:visible; z-index:2; }
.about-free .mega{font-size:clamp(44px,8vw,96px)}
.about-kicker{font-weight:900; color:var(--brand2); margin:.35rem 0 1.2rem; text-transform:uppercase; letter-spacing:1px}
.about-text p{margin:0 0 1rem; font-size:1.06rem; line-height:1.65}
.about-watermark{ position:absolute; left:50%; top:10px; transform:translateX(-50%); width:min(58vw,680px); opacity:.06; pointer-events:none; filter:grayscale(100%); }

/* ===== Claim ===== */
.claim-block{ position:relative; display:grid; place-items:center; min-height: clamp(260px, 52svh, 520px); padding:28px 0 38px; overflow:hidden; background:#fff; z-index:1; }
.claim-bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; filter:blur(1.5px) brightness(1.03); transform:scale(1.05); opacity:.98; }
.claim-block::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.18))}
.claim-block h2{position:relative; color:var(--brand2); text-shadow:0 2px 16px rgba(0,0,0,.25); font-size: clamp(40px, 9.5vw, 96px); padding:0 12px; text-wrap:balance; }
.claim-block::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(55vw,560px); height:min(55vw,560px); background:var(--claim-mark) center/contain no-repeat; opacity:.06; filter:grayscale(100%); }

/* ===== Leistungen ===== */
.services-wrap{background:linear-gradient(180deg,#0f0f10 0%, #103c78 58%, #ffffff 100%); padding:56px 0}
.stack-title{display:flex; flex-direction:column; align-items:center; gap:2px; margin:0 0 18px}
.stack-title .kicker{font-size:clamp(18px,2.8vw,28px); color:#dce7ff; letter-spacing:2px}
.stack-title .main{font-size:clamp(36px,6.4vw,64px); color:#fff}

.flipgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px}
.flip{perspective:1000px; aspect-ratio:1/1; border-radius:50%; position:relative; isolation:isolate}
.flip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; border-radius:inherit; overflow:hidden; border:1px solid #e5e7eb; background:#fff}
.flip-front,.flip-back{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .6s, opacity .3s; border-radius:inherit; will-change:transform, opacity; backface-visibility:hidden}
.flip-front{transform:rotateY(0deg); opacity:1; z-index:2; background-size:cover; background-position:center}
.flip-front::after{
  content:""; position:absolute; inset:0;
  /* oberer Bereich dezent, unten stärker – dimmt nur das Bild */
  background:linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.60));
}
.flip-front h3{
  position:relative; margin:0 12px; text-align:center; line-height:1.15;
  color:#fff; font-weight:900; letter-spacing:.3px;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
  -webkit-text-stroke:.2px rgba(0,0,0,.25);
  font-size:clamp(16px,2.2vw,22px);

  /* Clamp auf 2 Zeilen – Standard + WebKit */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-clamp:2; overflow:hidden;
}
.flip-back{transform:rotateY(180deg); opacity:0; z-index:1; background:#fff; color:#202020; text-align:center; padding:18px; pointer-events:none}
.flip:hover .flip-front,.flip.is-flipped .flip-front{transform:rotateY(-180deg); opacity:0; z-index:1}
.flip:hover .flip-back,.flip.is-flipped .flip-back{transform:rotateY(0deg); opacity:1; z-index:2; pointer-events:auto}
.flip-back > div{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:16px; gap:6px; overflow:hidden;
  text-wrap:pretty; word-break:break-word; hyphens:auto; -webkit-hyphens:auto;
}
/* optional stärker abdunkeln: <div class="flip" data-dim="strong"> */
.flip[data-dim="strong"] .flip-front::after{
  background:linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.75));
}

/* ===== Map ===== */
.map-wide{background:#fff}
.map-embed{position:relative;height:420px;overflow:hidden;border:0;border-radius:0}

/* ===== Bewertungen ===== */
.rating-wrap{background:#fff; padding:56px 0}
.rating-grid{display:grid; gap:24px}
.rating-grid.wide{max-width:1300px}
@media(min-width:980px){.rating-grid{grid-template-columns:360px 1fr}}
.rating-left{display:flex; flex-direction:column; align-items:center; text-align:center}
.rating-note{font-weight:900; color:#0f172a; font-size:clamp(18px,2.6vw,24px); margin:0 0 4px}
.rating-head{font-family:"Bebas Neue"; letter-spacing:.8px; font-size:40px; margin:4px 0 6px}
.rating-sub{margin:2px 0 12px; color:#475569; font-weight:800; letter-spacing:.3px;}
.stars{font-size:28px; letter-spacing:4px}
.stars.google{color:#fbbf24}
.stars.s{font-size:20px; letter-spacing:2px; color:#fbbf24}
.g-logo{margin-top:8px; font-weight:900; font-size:36px; letter-spacing:.5px}
.g{font-family:Inter,system-ui,sans-serif}
.g-b{color:#4285F4}.g-r{color:#EA4335}.g-y{color:#FBBC05}.g-g{color:#34A853}
.rating-slider{position:relative; overflow:hidden}
.rating-slider .track{display:grid; grid-auto-flow:column; gap:18px; overflow:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px 2px; margin-left:0}
.rating-slider .review{min-width:320px; max-width:420px; scroll-snap-align:start; border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04)}
.rating-slider .nav{display:none !important}

/* ===== Kontakt ===== */
.contact-dark{ --bg:#161616; background:var(--bg); color:#e5e7eb; padding:72px 0 84px; }
.contact-grid{ display:grid; gap:42px; align-items:start; grid-template-columns:1fr; }
@media (min-width:1100px){
  .contact-grid{ grid-template-columns: 0.9fr 1.35fr; gap:48px; }
  .contact-left{ margin-top: var(--contactLeftShift, 18px); } /* -> hier „runter machen“ */
}

.contact-left{ order:1; text-align:center }
.contact-title{
  font-family:"Bebas Neue", system-ui, sans-serif;
  font-weight:900; letter-spacing:.8px; line-height:1;
  color:#fff; font-size:clamp(52px,7.2vw,88px);
  margin:0 0 14px; text-align:left;
}
@media (max-width:1099px){ .contact-title{ text-align:center } }

.contact-brand{display:flex; align-items:center; justify-content:center; gap:18px; margin:12px 0 10px}
.wordmark{display:flex; flex-direction:column; line-height:1}
.wordmark.center{align-items:center; text-align:center; padding-bottom:14px; position:relative}
.wordmark.center::after{content:""; display:block; width:160px; height:2px; background:#fff; opacity:.9; margin:12px auto 8px; border-radius:2px}
.wordmark.big .wm-white{font-family:"Bebas Neue"; font-size:116px; color:#fff; letter-spacing:1.2px; font-weight:900}
.wordmark .wm-sub{margin-top:2px; font-size:22px; letter-spacing:5px; text-transform:uppercase; color:#dbe7ff}

/* Auf Handy: Name oben, Logo darunter + fluide Skalierung */
@media (max-width: 768px){
  .contact-title{
    font-size: clamp(28px, 9vw, 54px);
    margin-bottom: 8px;
    text-align:center;
  }
  .contact-brand{
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 3vw, 16px);
    margin: 6px 0 4px;
  }
  .wordmark.big .wm-white{
    font-size: clamp(48px, 18vw, 96px);
    line-height: .95;
  }
  .wordmark .wm-sub{
    font-size: clamp(12px, 4.2vw, 18px);
    letter-spacing: clamp(2px, 1vw, 5px);
  }
  .contact-brand img{
    width: clamp(120px, 40vw, 220px);
    height: auto;
  }
  .contact-data{
    font-size: clamp(1rem, 3.8vw, 1.22rem);
  }
}
/* extra eng: sehr schmale Geräte */
@media (max-width: 420px){
  .wordmark.big .wm-white{ font-size: clamp(44px, 20vw, 84px); }
}

/* Kontakt-Daten etwas größer */
.contact-data{margin-top:12px; text-align:center; font-size:var(--contactDataSize,1.18rem); line-height:1.7; font-weight:900}
.contact-data a{color:#cde7ff}

/* Rechte Spalte – Formular */
.contact-form{ order:2; margin-top:24px; background:#161616; padding:50px; border-radius:18px; }
@media (min-width:1100px){ .contact-form{ margin-top:64px; } }
.ask-head{
  font-family:"Bebas Neue", system-ui, sans-serif;
  color:#fff; text-align:right;
  font-size:clamp(52px,6.6vw,78px); font-weight:900; letter-spacing:.6px;
  margin:0 0 16px; padding-right:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:1099px){ .ask-head{ text-align:center; padding-right:0 } }

/* Felder – breiter + höher */
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%; padding:16px 18px; border-radius:30px;
  background:#ffffff; border:1px solid #d1d5db; color:#0f172a;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.contact-form input,.contact-form select{ height:56px; padding:0 22px; font-size:1rem; }
.contact-form textarea{ resize:none; min-height:220px; max-height:360px; overflow-y:auto; padding:18px 22px; font-size:1rem; scrollbar-gutter:stable both-edges; }
.contact-form .grid-2{ display:grid; gap:16px }
@media(min-width:680px){ .contact-form .grid-2{ grid-template-columns:1fr 1fr } }

/* DSGVO-Zeile */
.consentline { padding: 8px 10px; border-radius: 12px; gap: 8px; font-size: 0.95rem; }
.consentline.dark a{ color:#0b82ff }

/* Buttons */
.form-actions{ display:flex; gap:12px; justify-content:flex-end; align-items:center; margin-top:12px }
.contact-form .btn.primary{ background:linear-gradient(135deg,var(--brand),#60a5fa); border:none; color:#fff; font-weight:800; padding:14px 22px; border-radius:999px; cursor:pointer }

/* Status */
.status{ margin-top:14px; padding:10px 14px; border-radius:10px; font-size:.95rem; line-height:1.35; border:1px solid transparent }
.status.success{ background:#e6ffed; border-color:#10b981; color:#065f46 }
.status.error{ background:#ffe4e6; border-color:#f43f5e; color:#b91c1c }

/* ===== Brand Strip + Footer ===== */
.brand-strip{ background:#fff; padding:56px 0; border-top:1px solid var(--line) }
.strip-inner{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap }
.strip-inner img{width:200px; order:2}
.strip-wordmark{display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1; order:1}
.strip-wordmark .row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:center}
.b-tumu{font-family:"Bebas Neue"; font-size:100px; color:#101010}
.strip-wordmark .b-bau{font-family:"Bebas Neue"; font-size:100px; color:#101010 !important}
.b-dash{font-family:"Bebas Neue"; font-size:68px; color:#101010}
.strip-wordmark .wm-sub{font-size:16px; letter-spacing:5px; text-transform:uppercase; color:#6b7280}
@media (max-width:540px){
  .b-tumu,.strip-wordmark .b-bau{ font-size:72px; }
  .b-dash{ font-size:48px; }
}

.site-footer{padding:10px 0;background:var(--dark);border-top:1px solid #2a2a2a;color:#e5e7eb; position:relative}
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.footer-links{display:flex;gap:16px;align-items:center}
.site-footer a{color:#fff}
.site-footer a:hover{opacity:.85}
.icon{width:28px;height:28px;display:inline-block;background-size:cover;background-position:center;border-radius:4px;opacity:.95}
.icon:hover{opacity:1}
.icon.ig{background-image:url('../icons/instagram.svg')}
.icon.fb{background-image:url('../icons/facebook.svg')}

/* Back-to-top Button */
.to-top{position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; border:0; background:#1f6feb; color:#fff; font-size:18px; box-shadow:0 6px 14px rgba(0,0,0,.2); cursor:pointer; display:none; z-index:95}
.to-top.show{display:block}

/* WhatsApp FAB */
.wa-fab{position:fixed;left:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 6px 14px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;z-index:90}
.wa-fab::before{content:'';display:block;width:26px;height:26px;background:url('../icons/whatsapp.svg') center/contain no-repeat}

/* Validierung Optik */
input:invalid, textarea:invalid, select:invalid{border-color:#f43f5e}
input:valid, textarea:valid, select:valid{border-color:#10b981}

/* ===== Cookie-Panel ===== */
.cc-fab{ position: fixed; right: 18px; bottom: 84px; width: 52px; height: 52px; border-radius: 50%; background:#111; color:#fff; border:0; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.25); z-index: 9999; font-size:22px; line-height:1 }
.cc-fab:hover{ filter: brightness(1.1) }
.cc-panel{ position: fixed; right: 18px; bottom: 18px; z-index: 10000; width: min(420px, calc(100vw - 36px)); background:#fff; color:#0f172a; border-radius:16px; border:1px solid #e5e7eb; box-shadow: 0 12px 30px rgba(0,0,0,.24); transform: translateY(16px); opacity:.0; pointer-events:none; transition: transform .2s ease, opacity .2s ease; font-size: 14px }
.cc-panel.active{ transform: translateY(0); opacity:1; pointer-events:auto }
.cc-header{ padding:14px 16px; border-bottom:1px solid #eef2f7; font-weight:900 }
.cc-text{ padding:12px 16px }
.cc-rows{ padding: 6px 16px 0 16px }
.cc-row{ display:flex; gap:10px; align-items:center; padding:8px 0 }
.cc-row input[type="checkbox"]{appearance:auto; -webkit-appearance:auto; inline-size:18px; block-size:18px; margin-inline-end:.5rem; accent-color:#111;}
.cc-actions{ display:flex; gap:10px; padding:14px 16px 16px 16px; justify-content:flex-end }
.cc-panel a{ color: var(--brand) }

/* ===== Mobile Tweaks & Nav-Dropdown ===== */
@media (max-width:860px){
  .brand-logo{width:90px}
  .brand-tumu,.brand-bau{font-size:52px}
  .dash{font-size:48px}
  .brand-row{gap:16px}

  .nav-toggle{display:block}

  .brand-row{position:relative}
  .main-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#ffffff; border-top:1px solid #e5e7eb;
    flex-direction:column; gap:16px; padding:16px 20px; z-index:50;
  }
  .main-nav.active{display:flex}

  .main-nav a{padding:8px 2px}
  .main-nav .cta{align-self:flex-start}
}

@media (max-width:600px){
  .container{padding:20px}
  .topbar-inner{padding:6px 20px}
  .wa-fab{left:14px;bottom:14px;width:52px;height:52px}
  .brand-tumu,.brand-bau{font-size:44px}
  .dash{font-size:40px}
  .brand-sub{font-size:16px}
  .main-nav{gap:12px}
}

/* iPad Landscape/Tablet: etwas mehr Luft im Header und Kontaktformular */
@media (min-width: 820px) and (max-width: 1180px){
  .brand-row{ gap: 32px; }
  .contact-form{ padding: 44px; }
  .contact-title{ font-size: clamp(48px, 6vw, 80px); }
}

/* Barrierefreiheit: weniger Animationen respektieren */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto; }
  .flip *, .rating-slider .track { transition: none !important; }
}
.flip-front h3{
  position: relative;
  z-index: 2;              /* ÜBER dem Overlay */
  color:#fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  -webkit-text-stroke: .2px rgba(0,0,0,.25);
  filter: none;            /* falls woanders vererbt wurde */
  mix-blend-mode: normal;  /* sicherstellen, dass es nicht „verblendet“ */
}
/* ===== PATCH: Mobile-Hero-Quellen + Kontakt-Fix + Flip-Fix ===== */

/* --- Mobile Hero: Gerätespezifische Bilder --- */
/* iPhone Pro / Pro Max (≈430 CSS px, DPR=3) */
@media (max-width: 440px) and (min-resolution: 3dppx){
  .hero--image{
    background-image: url('../img/hero-mobile-1284x2778.jpg');
    background-position: 68% 0;
  }
}
/* iPhone 13/14/15/16/17 (≈390 CSS px, DPR=3) */
@media (max-width: 400px) and (min-resolution: 3dppx){
  .hero--image{
    background-image: url('../img/hero-mobile-1170x2532.jpg');
    background-position: 68% 0;
  }
}
/* Standard-Android / kleinere Phones */
@media (max-width: 412px){
  .hero--image{
    background-image: url('../img/hero-mobile-1080x1920.jpg');
    background-position: 65% 0;
  }
}
/* iPad – Hochformat */
@media (min-width: 600px) and (max-width: 834px) and (orientation: portrait){
  .hero--image{
    background-image: url('../img/hero-mobile-1536x2048.jpg');
    background-position: 70% 0;
  }
}

/* Desktop: immer das volle Original über die gesamte Breite */
@media (min-width: 1024px){
  .hero--image{
    background: url('../img/hero.jpg?v=8') top center / cover no-repeat #0b1530 !important;
  }
}

/* --- Kontaktformular: sicher zentriert + mobil sauber --- */
.contact-form{
  margin-inline: auto;          /* zentriert */
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px){
  .contact-form{ padding: clamp(20px, 5vw, 50px); }
  .ask-head{
    white-space: normal;        /* darf umbrechen */
    padding-right: 0;           /* keine Rechtsverschiebung */
    text-align: center;
    line-height: 1;
    text-wrap: balance;
  }
}


@media (min-width: 1100px){
  .flip-front h3{
    -webkit-line-clamp: 3;             /* lange Titel (z.B. Komplettservice) */
    line-clamp: 3;
  }
}
/* === Parallax nur Desktop/Laptop (muss am Ende stehen) === */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hero--image{
    background-attachment: fixed !important; /* überschreibt mobile scroll-Regel */
  }
}
/* =========================
   PATCH – Header/Navigation, Hero, Footer, Flip
   ========================= */

/* 1) Header: Burger immer NEBEN dem Logo (eine Zeile auf Handy) */
@media (max-width: 860px){
  .brand-row{
    flex-wrap: nowrap;           /* nicht umbrechen */
    gap: 12px;
    align-items: center;
  }
  .brand{ flex: 1 1 auto; min-width: 0; }      /* Logo+Wortmarke dürfen schrumpfen */
  .brand-words{ min-width: 0; }
  .brand-logo{ width: 90px; height: auto; }    /* etwas kleiner, damit der Burger Platz hat */
  .nav-toggle{
    display: block;
    margin-left: 8px;
    flex: 0 0 auto;
    align-self: center;
    line-height: 1;
  }

  /* Dropdown bleibt unter dem Header, aber der Button steht in derselben Zeile */
  .main-nav{
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    flex-direction: column; gap: 16px; padding: 16px 20px;
    display: none;
    z-index: 50;
  }
  .main-nav.active{ display: flex; }
}

/* 2) Hero auf schmalem Desktop nicht „zu nah gezoomt“.
      In diesem Band zeigen wir das komplette Bild (letterboxed). */
@media (min-width: 835px) and (max-width: 1180px){
  .hero--image{
    background-image: url('../img/hero.jpg?v=8'); /* Desktop-Original */
    background-size: contain;                     /* GANZES Motiv */
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #0b1530;                    /* Ränder angenehm füllen */
  }
}
/* Ab breiteren Screens wieder klassisch „cover“ */
@media (min-width: 1181px){
  .hero--image{
    background-image: url('../img/hero.jpg?v=8');
    background-size: cover;
    background-position: top center;
  }
}

/* 3) Footer auf Handy sauber zentriert + Platz für FABs (WhatsApp/To-Top) */
@media (max-width: 560px){
  .footer-inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .footer-links{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .site-footer{ padding-bottom: 82px; } /* kein Überlappen mit runden Buttons */
}
/* =========================
   PATCH – Header/Navigation, Hero, Footer, Flip
   ========================= */

/* 1) Header: Burger immer NEBEN dem Logo (eine Zeile auf Handy) */
@media (max-width: 860px){
  .brand-row{
    flex-wrap: nowrap;           /* nicht umbrechen */
    gap: 12px;
    align-items: center;
  }
  .brand{ flex: 1 1 auto; min-width: 0; }      /* Logo+Wortmarke dürfen schrumpfen */
  .brand-words{ min-width: 0; }
  .brand-logo{ width: 90px; height: auto; }    /* etwas kleiner, damit der Burger Platz hat */
  .nav-toggle{
    display: block;
    margin-left: 8px;
    flex: 0 0 auto;
    align-self: center;
    line-height: 1;
  }

  /* Dropdown bleibt unter dem Header, aber der Button steht in derselben Zeile */
  .main-nav{
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    flex-direction: column; gap: 16px; padding: 16px 20px;
    display: none;
    z-index: 50;
  }
  .main-nav.active{ display: flex; }
}

/* 2) Hero auf schmalem Desktop nicht „zu nah gezoomt“.
      In diesem Band zeigen wir das komplette Bild (letterboxed). */
@media (min-width: 835px) and (max-width: 1180px){
  .hero--image{
    background-image: url('../img/hero.jpg?v=8'); /* Desktop-Original */
    background-size: contain;                     /* GANZES Motiv */
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #0b1530;                    /* Ränder angenehm füllen */
  }
}
/* Ab breiteren Screens wieder klassisch „cover“ */
@media (min-width: 1181px){
  .hero--image{
    background-image: url('../img/hero.jpg?v=8');
    background-size: cover;
    background-position: top center;
  }
}

/* 3) Footer auf Handy sauber zentriert + Platz für FABs (WhatsApp/To-Top) */
@media (max-width: 560px){
  .footer-inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .footer-links{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .site-footer{ padding-bottom: 82px; } /* kein Überlappen mit runden Buttons */
}

/* =========================
   PATCH – Flipkarten (Front)
   Titel nie abschneiden
   ========================= */

/* Grundverhalten: bis zu 3 Zeilen, weiche Trennungen erlauben */
.flip-front h3{
  padding-inline: 14px;             /* etwas Luft am Rand */
  line-height: 1.15;
  /* dynamische, etwas kleinere Schrift, damit lange Worte passen */
  font-size: clamp(14px, 2.3vw, 22px);

  /* gutes Umbrechen für DE */
  hyphens: auto;                     /* Silbentrennung */
  -webkit-hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;           /* im Notfall beliebig umbrechen */

  /* mehr Zeilen zulassen => nichts fällt hinten weg */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;             /* war 2 – jetzt 3 Zeilen */
  line-clamp: 3;
  overflow: hidden;
}

/* auf sehr kleinen Phones Schrift noch etwas zurücknehmen */
@media (max-width: 420px){
  .flip-front h3{
    font-size: clamp(13px, 4vw, 18px);
    line-height: 1.12;
  }
}

/* auf großen Desktops darf es wieder etwas größer sein */
@media (min-width: 1200px){
  .flip-front h3{
    font-size: clamp(16px, 1.2vw, 24px);
  }
}

/* optional: ganz enge Kreise (z. B. wenn Grid kleiner wird) gezielt entspannen */
.flip[data-dim="strong"] .flip-front h3{
  font-size: clamp(13px, 2vw, 20px);
}






/* =========================
   HERO-LAPTOP FIX (ohne Weißabstand, kein Margin-Top)
   ========================= */

/* ungefähre Headerhöhe für den Fokus-Versatz */
:root{ --headerH: 140px; }                    /* Laptop/Desktop grob */
@media (max-width:1180px){ :root{ --headerH: 130px; } }  /* schmale Notebooks */
@media (max-width:860px){  :root{ --headerH: 120px; } }  /* Tablets/Phones */

/* Nur Laptops/Desktops: Bild etwas tiefer „blicken“ lassen,
   damit unter dem Header nichts „abgeschnitten“ wirkt */
@media (min-width:1024px){
  /* Background-Variante */
  .hero--image{
    /* X=58% (mehr nach rechts), Y = ein Teil der Headerhöhe */
    background-position: 58% calc(var(--headerH) * 0.6) !important;
  }
  /* Falls du <img class="hero-media"> nutzt */
  .hero--image .hero-media{
    object-position: 58% calc(var(--headerH) * 0.6) !important;
  }
}

/* Schmale Desktops, auf denen das Motiv oft zu „nah“ wirkt:
   komplette Grafik zeigen (letterboxed), aber ohne weißen Rand oben */
@media (min-width:835px) and (max-width:1180px){
  .hero--image{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 58% calc(var(--headerH) * 0.4) !important;
    background-color: #0b1530; /* Ränder dezent füllen */
  }
}

/* Feintuning für sehr flache Notebook-Displays */
@media (min-width:1024px) and (max-height:820px){
  .hero--image{ background-position: 58% calc(var(--headerH) * 0.75) !important; }
  .hero--image .hero-media{ object-position: 58% calc(var(--headerH) * 0.75) !important; }
}
/* Kontaktdaten wie Headline (Bebas Neue) */
.contact-dark .contact-data,
.contact-dark .contact-data a {
  font-family: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;     /* wie oben */
  font-weight: 900;
  font-style: normal;      /* falls vorher kursiv/bold-italic kam */
  line-height: 1.1;
}

/* Zahlen sauber darstellen */
.contact-dark .contact-data {
  font-variant-numeric: lining-nums tabular-nums;
}

/* optional: Größe leicht anpassen (falls zu groß/klein) */
@media (min-width: 768px){
  .contact-dark .contact-data { font-size: 1.3rem; }
}
/* iPad PORTRAIT: eigenes Motiv, normal „cover“ */
@media (min-width:600px) and (max-width:834px) and (orientation:portrait){
  .hero--image{
    background-image: url('../img/hero-ipad-portrait-1536x2048.jpg') !important;
    background-position: 68% 0;     /* ggf. 60–70% testen */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0b1530;
    background-attachment: scroll;  /* kein Parallax auf iPad */
  }
}

/* iPad LANDSCAPE: eigenes Motiv */
/* Variante A – ganzes Motiv zeigen (kein Abschneiden) */
@media (min-width:810px) and (max-width:1180px) and (orientation:landscape){
  .hero--image{
    background-image: url('../img/hero-ipad-landscape-2160x1620.jpg') !important;
    background-size: contain;        /* zeigt das gesamte Bild */
    background-repeat: no-repeat;
    background-position: center top; /* ggf. 58% top testen */
    background-color: #0b1530;       /* Letterbox-Ränder füllen */
    background-attachment: scroll;   /* kein Parallax auf iPad */
  }
}

/* Parallax NUR auf echten Desktops/Laptops mit Maus */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hero--image{ background-attachment: fixed !important; }
}

/* iPad PORTRAIT: eigenes Motiv, normal „cover“ */
@media (min-width:600px) and (max-width:834px) and (orientation:portrait){
  .hero--image{
    background-image: url('../img/hero-ipad-portrait-1536x2048.jpg') !important;
    background-position: 68% 0;     /* ggf. 60–70% testen */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0b1530;
    background-attachment: scroll;  /* kein Parallax auf iPad */
  }
}

/* iPad LANDSCAPE: eigenes Motiv */
/* Variante A – ganzes Motiv zeigen (kein Abschneiden) */
@media (min-width:810px) and (max-width:1180px) and (orientation:landscape){
  .hero--image{
    background-image: url('../img/hero-ipad-landscape-2160x1620.jpg') !important;
    background-size: contain;        /* zeigt das gesamte Bild */
    background-repeat: no-repeat;
    background-position: center top; /* ggf. 58% top testen */
    background-color: #0b1530;       /* Letterbox-Ränder füllen */
    background-attachment: scroll;   /* kein Parallax auf iPad */
  }
}

/* Parallax NUR auf echten Desktops/Laptops mit Maus */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hero--image{ background-attachment: fixed !important; }
}
/* iPad (Portrait & Landscape): Flipkarten lesbar halten */
@media (min-width: 768px) and (max-width: 1180px){
  /* Kreise etwas größer, damit mehr Text reinpasst */
  .flipgrid{
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
  }

  /* FRONT: bis zu 3 Zeilen, kleine Reduktion der Größe */
  .flip-front h3{
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: clamp(14px, 1.9vw, 20px);
    line-height: 1.14;
    padding-inline: 14px;
  }

  /* BACK: Inhalte nie abgeschnitten – darf scrollen, falls nötig */
  .flip-back{ overflow: hidden; }
  .flip-back > div{
    overflow: auto;                   /* sanft scrollen statt cut */
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
  .flip-back h3{
    margin: 0 0 6px;
    font-size: clamp(16px, 2.1vw, 22px);
    line-height: 1.15;
  }
  .flip-back ul{ margin: 6px 0 0; padding-left: 18px; }
}
.hero--image{ position:relative; min-height:100svh; overflow:hidden; }
.hero-media{ position:absolute; inset:0; display:block; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:58% top; }

/* Parallax nur Desktop/Laptop mit Maus */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hero--image{
    background: url('../img/hero.jpg?v=8') top center / cover no-repeat #0b1530;
    background-position:58% top;
    background-attachment: fixed;
  }
  .hero-media{ display:none; } /* nur BG aktiv -> Parallax */
}


/* --- Header: sicher nebeneinander + sanft kleiner auf Handy --- */

/* Basis: zwei Spalten, Text links (flexibel), Logo rechts (fix) */
.brand{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 14px;
  min-width: 0;
}
.brand-words{ min-width: 0; }
.brand-title{ white-space: nowrap; }  /* "TUMU BAU" bleibt eine Zeile */
.brand-sub{   white-space: nowrap; }

/* Standardgrößen (kannst du lassen wie bei dir) */
.brand-logo{ width: 120px; height: auto; }

/* 1) kleine Phones (≤ 430px): sanft verkleinern, aber nebeneinander lassen */
@media (max-width: 430px){
  .brand{ column-gap: 10px; }
  .brand-logo{ width: 80px; }                  /* vorher 120 */
  .brand-title{ gap: 8px; }
  .brand-tumu, .brand-bau{
    font-size: clamp(34px, 11.5vw, 42px);      /* ~10–20% kleiner */
    letter-spacing: .6px;
  }
  .brand-sub{
    font-size: clamp(12px, 3.2vw, 14px);
    letter-spacing: 3px;
  }
}

/* 2) mittelkleine Phones (431–520px): ganz leicht kleiner */
@media (min-width: 431px) and (max-width: 520px){
  .brand-logo{ width: 92px; }                  /* leicht runter */
  .brand-tumu, .brand-bau{
    font-size: clamp(40px, 10.5vw, 50px);
  }
  .brand-sub{ font-size: clamp(13px, 2.8vw, 16px); }
}

/* 3) Tablets schmal (≤ 860px): deine bisherigen Werte,
      aber minimal kleiner, damit Platz bleibt */
@media (max-width: 860px){
  .brand-logo{ width: 90px; }
  .brand-tumu, .brand-bau{ font-size: 52px; }
}




/* === HERO: Tablets ohne Rand (immer cover, Fokus 58%/top) === */
@media (min-width: 768px) and (max-width: 1180px){
  .hero--image{
    background-image: url('../img/hero.jpg?v=8') !important;
    background-size: cover !important;        /* statt contain */
    background-repeat: no-repeat !important;
    background-position: 58% top !important;  /* Fokuspunkt */
    background-color: #0b1530;                /* sieht man praktisch nicht mehr */
  }
}

/* iPad Landscape speziell überschreiben, falls oben schon definiert war */
@media (min-width:810px) and (max-width:1180px) and (orientation:landscape){
  .hero--image{
    background-image: url('../img/hero.jpg?v=8') !important;
    background-size: cover !important;        /* statt contain */
    background-position: 58% top !important;
    background-repeat: no-repeat !important;
  }
}



/* Basis: Text komplett ausblenden, damit niemals ein Glyph gebraucht wird */
.scroll-cue{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  width:44px; height:44px; border-radius:999px;
  border:2px solid rgba(255,255,255,.85);
  background:transparent; cursor:pointer; z-index:2;
  font-size:0; line-height:0;   /* <- wichtig gegen „?“ */
}

/* kleiner Chevron aus CSS-Linien (funktioniert immer, ohne Font) */
.scroll-cue::before{
  content:""; display:block; width:12px; height:12px; margin:0 auto;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg) translateY(-1px);
}
.hero-media img{
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;   /* unterbindet iOS-Bild-Callout */
}