:root {
  --brand:#0087d2;
  --brand-dark:#1e8e54;
  --accent:#1f8bd6;
  --text:#555555;
  --muted:#555555;
  --line:#e2e8f0;
  --bg:#ffffff;
  --container-padding: 12px;
  --logo-safe: clamp(12px, 2vw, 24px); /* simuliert „H“ */
  --footer-grad-1:#0079c1;
  --footer-grad-2:#27a38d;
  --footer-grad-3:#a1c517;

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Reset/Basis */
*,*::before,*::after { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-sans-serif);
  font-size: clamp(16px, 1.4vw + 12px, 20px);
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; display: block; }

/* Layout */
.container { max-width: 1480px; margin-inline: auto; padding: var(--container-padding); }

/* Header */
header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding-block: 8px 12px; }
.logo { display: flex; align-items: center; gap: 12px; padding: var(--logo-safe) 0 var(--logo-safe) var(--logo-safe); }
.logo img { height: 80px; width: auto; display: block; }
.service-phone { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--muted); font-size: clamp(16px, 1.2vw, 20px); }
.service-phone svg { width: 18px; height: 18px; flex: 0 0 18px; }
.service-phone a { color: #777; text-decoration: none; }

/* Hero */
.hero { display: grid; grid-template-columns: 2fr 1fr; gap: 0; border: 0; position: relative; }
.hero-left img, .hero-right img { height: 440px; width: 100%; object-fit: cover; }
.hero-right img { margin-top: 20px; height: 280px;}

/* Overlay-Panel (66% Breite, rechts) */
.title, .card {
  position: relative; z-index: 2; background: #fff; color: var(--text);
  margin-left: 32px;
  margin-right: auto;         /* nach rechts schieben */
  width: 66%;                /* 2/3 Breite */
  box-sizing: border-box;
}
.title { margin-top: -140px; padding: 24px 32px; }
.title h1 { font-size: clamp(36px, 6vw, 60px); line-height: 2em; margin: -20px 0 0 0; font-weight: 600; color: #555; font-family: "Geogrotesque",Helvetica,Arial,Lucida,sans-serif; }
.title h2 { font-size: clamp(22px, 3vw, 36px); margin: 0 0 14px; font-weight: 600; color: #555; font-family: "Geogrotesque",Helvetica,Arial,Lucida,sans-serif; }
.title p { font-family: "Merriweather",Georgia; margin: 0 0 14px; color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6em; }

.card { border: none; padding: 20px 32px 24px; margin-top: 0; }

/* ==================== FORM ==================== */
form { margin-top: 18px; font-size: clamp(16px, 1.1vw, 18px); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width:880px){
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.row { margin-bottom: 20px; }
.form-field { display: block; }

/* Einzeilige Fragen */
.form-row { display:block; }
.form-row + .form-row { margin-top: 20px; }
#sonstiges-row { margin-top: 20px; }

label { display:block; font-size:clamp(14px,1vw,16px); font-weight:600; color:#555555; margin:0 0 6px; }

input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
textarea{
  width:100%;
  border:1px solid var(--line);
  padding:16px 14px;
  font-size:clamp(14px,1vw,16px);
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

select{
  width:100%;
  border:1px solid var(--line);
  padding:16px 14px;
  font-size:clamp(14px,1vw,16px);
  background:#fff;
  color:#555555;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}

select:focus{ border-color:#555555; box-shadow:0 0 0 4px rgba(31,139,214,.08); }
option{ color:#555555; font-size:clamp(14px,1vw,16px); }

input::placeholder,textarea::placeholder{ font-family:inherit; color:#999999; opacity:1; font-size:clamp(14px,1vw,16px); }
input,select,textarea,button{ font-family:inherit; }

textarea{ min-height:120px; resize:vertical; }
input:focus,textarea:focus{ border-color:#555555; box-shadow:0 0 0 4px rgba(31,139,214,.08); }

/* Radio-Gruppen */
.radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  align-items:center;
  margin-bottom: 16px;
}
.radio-group label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  color:#555555;
  cursor:pointer;
}
.radio-group input[type="radio"]{
  width:18px; height:18px;
  accent-color: var(--brand);
}

/* Hinweis & Button */
.inline-help{ font-size:clamp(13px,.9vw,14px); color:var(--muted); margin-top:26px; }
.actions{ margin-top:14px; display:flex; gap:12px; align-items:center; }
.btn{
  appearance:none; border:none; background:var(--brand); color:#fff; font-weight:700;
  padding:16px 20px; font-size:clamp(16px,1.2vw,18px); cursor:pointer;
  box-shadow:0 6px 14px rgba(0,135,210,.24);
  transition:transform .06s ease, filter .2s ease, background .2s ease;
}
.btn:hover{ filter:saturate(1.05); }
.btn:active{ transform:translateY(1px); }

/* ================= Footer ================= */
footer{
  margin-top:48px;
  font-size:clamp(16px,1.1vw,18px);
  overflow-x: clip;
}
.footer-band{ position:relative; border:none; border-radius:0; }
.footer-band::before{
  content:""; position:absolute; z-index:-1; inset:0 auto 0 50%; transform:translateX(-50%);
  width:100vw; height:100%; background:linear-gradient(90deg, #0079c1, #27a38d, #a1c517);
}
.footer-gradient{ background:transparent !important; padding:30px 0; color:#fff; }
.footer-gradient .container{
  display:grid; grid-template-columns: minmax(140px, 240px) 1fr; align-items:center; gap:22px;
}
.footer-logo img{ display:block; height:86px; }
.footer-text{ font-size:clamp(15px,1vw,21px); line-height:1.45; text-align:left; }
.footer-bottom{ background:#fff; padding:0 0; }
.footer-bottom .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.footer-bottom .social--outline{ order:1; margin:0; }
.footer-bottom .legal{ order:2; margin-left:auto; }
.legal a{ font-size:clamp(14px,1vw,16px); color:#475569; }

/* Social */
.social--outline{ display:flex; align-items:center; gap:10px; }
.social--outline .social-icon{
  width:40px; height:40px; border-radius:9999px;
  border:1px solid #6b6b6b; color:#6b6b6b; background:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; transition:transform .12s ease, border-color .12s ease, color .12s ease;
}
.social--outline .social-icon svg{ width:clamp(16px,1.2vw,18px); height:clamp(16px,1.2vw,18px); fill:currentColor; }
.social--outline .social-icon:hover{ transform:translateY(-1px); border-color:#555555; color:#555555; }
.social--outline .social-icon:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.social--outline a[aria-label="YouTube"]:hover,
.social--outline a[aria-label="YouTube"]:focus-visible{ color:#FF0000; border-color:#FF0000; background:rgba(255,0,0,.06); }
.social--outline a[aria-label="Facebook"]:hover,
.social--outline a[aria-label="Facebook"]:focus-visible{ color:#1877F2; border-color:#1877F2; background:rgba(24,119,242,.06); }
.social--outline a[aria-label="Instagram"]:hover,
.social--outline a[aria-label="Instagram"]:focus-visible{ color:#E4405F; border-color:#E4405F; background:rgba(228,64,95,.06); }
.social--outline a[aria-label="LinkedIn"]:hover,
.social--outline a[aria-label="LinkedIn"]:focus-visible{ color:#0A66C2; border-color:#0A66C2; background:rgba(10,102,194,.06); }
.social--outline a[aria-label="Spotify"]:hover,
.social--outline a[aria-label="Spotify"]:focus-visible{ color:#1DB954; border-color:#1DB954; background:rgba(29,185,84,.06); }

/* Responsive Footer */
@media (max-width: 820px){
  .footer-gradient .container{ grid-template-columns: 1fr; gap:12px; }
  .footer-bottom .container{ flex-direction:column; gap:12px; }
}

/* Mobile Panels */
@media (max-width:980px){
  .title, .card { margin-left:0; width:100%; } /* Mobil wieder volle Breite */
  .title { margin-top:16px; padding:0; }
  .card { padding:20px; border:1px solid var(--line); }
  /* 1) Logo: kleiner Abstand links/oben */
  header{ padding-block: 4px 8px; }
  .logo img{
    height: 68px;
    margin: 0 0 8px 4px;
  }

  /* 2) Service-Telefon & Nummer auf zwei Zeilen */
  .service-phone{ align-items: flex-start; }
  .service-phone strong{
    display:block;
    line-height:1.2;
  }
  .service-phone svg{ margin-top: 2px; }

  /* 3) Hero: linkes Bild volle Breite, rechtes Bild ausblenden */
  .hero{ grid-template-columns: 1fr; }
  .hero-right{ display:none; }
  .hero-left img{
    width:100%;
    height:auto !important;
    object-fit: cover;
  }
}

@media (max-width:420px){
  .container{ padding:16px; }
  .hero-left img, .hero-right img{ height:320px; }
  .logo img{ height:60px; margin-left:6px; }
}