html{scroll-behavior:smooth}
body{background:var(--white);color:var(--text-body);font:var(--type-body)}
.container{max-width:1240px;margin:0 auto;padding:0 48px}
@media(max-width:820px){.container{padding:0 24px}}
section{position:relative}
.band{padding:120px 0}
@media(max-width:820px){.band{padding:76px 0}}
.eyebrow{display:flex;align-items:center;gap:16px;font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-500);margin-bottom:22px}
.eyebrow::before{content:"";width:38px;height:1px;background:currentColor;flex:none}
.eyebrow.center{justify-content:center}
.title{font:var(--weight-semibold) clamp(32px,4vw,var(--text-4xl))/1.12 var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)}
.title .thin{font-weight:var(--weight-light);color:var(--ink-500)}
.title .mark{color:var(--sea-500)}
.on-dark .title,.on-dark h3{color:var(--white)}
.on-dark .title .thin{color:var(--white-a60)}
.on-dark .title .mark{color:var(--sun-400)}
.lede{font:var(--type-body-lg);color:var(--text-muted);max-width:56ch}
.on-dark .lede{color:var(--white-a60)}
.center-head{text-align:center;max-width:680px;margin:0 auto 72px}
.center-head .lede{margin:20px auto 0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--radius-pill);font:var(--weight-medium) var(--text-sm)/1.2 var(--font-body);letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:var(--transition-control)}
.btn--sun{background:var(--sun-400);color:var(--ink-900)}
.btn--sun:hover{background:var(--sun-300);transform:translateY(-2px);box-shadow:0 10px 24px rgba(224,174,34,.28);color:var(--ink-900)}
.btn--sea{background:var(--sea-500);color:var(--white)}
.btn--sea:hover{background:var(--sea-400);transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,96,168,.3);color:var(--white)}
.btn--ghost{border-color:var(--white-a32);color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--navy-900);border-color:var(--white)}
.btn--line{border-color:var(--ink-a24);color:var(--text-heading)}
.btn--line:hover{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}
.btn .arw{transition:transform var(--duration-fast) var(--ease-out-soft)}
.btn:hover .arw{transform:translateX(3px)}
/* nav */
nav{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--ink-a08)}
.nav-inner{max-width:1240px;margin:0 auto;padding:0 48px;height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
@media(max-width:820px){.nav-inner{padding:0 24px;height:72px}}
.nav-logo img{height:52px;width:auto}
@media(max-width:820px){.nav-logo img{height:40px}}
.nav-right{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font:var(--type-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);text-decoration:none;transition:color var(--duration-fast) var(--ease-out-soft)}
.nav-links a:hover{color:var(--navy-900)}
.nav-cta{padding:11px 22px;border-radius:var(--radius-pill);background:var(--sea-500);color:var(--white)!important}
.nav-cta:hover{background:var(--sea-600)}
.lang{display:flex;align-items:center;gap:2px;padding:5px;border:1px solid var(--ink-a12);border-radius:var(--radius-pill);background:transparent;cursor:pointer}
.lang span{padding:5px 12px;border-radius:var(--radius-pill);font:var(--weight-medium) 11px/1 var(--font-body);letter-spacing:.1em;color:var(--ink-400)}
.lang .on{background:var(--navy-900);color:var(--white)}
/* hero */
#hero{min-height:100vh;display:flex;align-items:center;padding:168px 0 96px;background:var(--navy-900);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--sea-800);overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 55%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,31,45,.94) 30%,rgba(13,31,45,.72) 62%,rgba(13,31,45,.34) 100%)}
.hero-glow{position:absolute;right:-8%;top:-20%;width:52%;height:120%;background:radial-gradient(closest-side,rgba(44,157,217,.22),transparent 70%);pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:820px}
.hero h1{font:var(--weight-light) clamp(44px,6vw,var(--text-6xl))/1.05 var(--font-display);letter-spacing:var(--tracking-tight);color:var(--white);margin:0 0 30px}
.hero h1 strong{font-weight:var(--weight-semibold);color:var(--sun-400)}
.hero .eyebrow{color:var(--gold-400)}
.hero-sub{font:var(--weight-light) var(--text-md)/1.75 var(--font-body);color:var(--white-a72);max-width:58ch;margin:0 0 44px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-tags{margin-top:76px;padding-top:34px;border-top:1px solid var(--white-a12);display:flex;flex-wrap:wrap;gap:10px}
.chip{font:var(--weight-regular) var(--text-xs)/1 var(--font-body);letter-spacing:.05em;color:var(--white-a60);border:1px solid var(--white-a16);border-radius:var(--radius-pill);padding:9px 16px}
/* trust */
#trust{background:var(--sand-100);border-bottom:1px solid var(--ink-a08);padding:26px 0}
.trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 44px}
.trust-item{display:flex;align-items:center;gap:11px;font:var(--weight-regular) var(--text-sm)/1 var(--font-body);color:var(--ink-500)}
.trust-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-500);flex:none}
/* manifesto */
.split{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:44px}}
.quote{font:var(--weight-light) clamp(26px,3.1vw,40px)/1.32 var(--font-display);letter-spacing:var(--tracking-snug);color:var(--navy-900)}
.quote .mark{color:var(--sea-500);font-weight:var(--weight-regular)}
.quote-rule{width:56px;height:3px;background:var(--sun-400);border-radius:2px;margin-bottom:32px}
.prose p{font:var(--weight-light) var(--text-md)/1.8 var(--font-body);color:var(--ink-500);margin:0 0 20px}
/* services */
#services{background:var(--navy-900)}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.services-grid{grid-template-columns:1fr}}
.service{background:var(--navy-800);border-radius:var(--radius-xl);padding:56px 48px;border:1px solid var(--white-a12);position:relative;overflow:hidden;transition:var(--transition-surface)}
.service:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.service::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--accent)}
.service--web{--accent:var(--ocean-400)}
.service--adv{--accent:var(--coral-500)}
.service-type{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.service h3{font:var(--weight-light) clamp(26px,2.7vw,34px)/1.2 var(--font-display);letter-spacing:var(--tracking-tight);color:var(--white);margin:0 0 22px}
.service h3 strong{font-weight:var(--weight-semibold)}
.service p{font:var(--weight-light) var(--text-base)/1.8 var(--font-body);color:var(--white-a60);margin:0 0 30px}
.service ul{list-style:none;margin:0 0 36px;padding:0}
.service li{display:flex;gap:14px;align-items:flex-start;font:var(--weight-regular) var(--text-sm)/1.6 var(--font-body);color:var(--white-a72);padding:13px 0;border-bottom:1px solid var(--white-a12)}
.service li::before{content:"→";color:var(--accent);flex:none}
/* work */
#our-work{background:var(--sand-100)}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:900px){.work-grid{grid-template-columns:1fr}}
.work{background:var(--white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--ink-a08);transition:var(--transition-surface)}
.work:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.media{position:relative;aspect-ratio:16/10;background:var(--sand-300);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slower) var(--ease-out-soft)}
.work:hover .media img{transform:scale(1.045)}
.media.is-empty{background:repeating-linear-gradient(135deg,var(--sand-200) 0 14px,var(--sand-300) 14px 15px)}
.media.is-empty::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--sand-500);text-align:center;padding:24px}
.media-tag{position:absolute;top:18px;left:18px;background:var(--navy-900);color:var(--sun-400);font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:8px 14px;border-radius:var(--radius-pill)}
.work-body{padding:38px 40px 42px}
.work-place{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-500);margin-bottom:12px}
.work-body h3{font:var(--weight-light) clamp(22px,2.4vw,29px)/1.24 var(--font-display);letter-spacing:var(--tracking-tight);color:var(--navy-900);margin:0 0 14px}
.work-body h3 strong{font-weight:var(--weight-semibold);color:var(--sea-500)}
.work-body p{font:var(--weight-light) var(--text-sm)/1.8 var(--font-body);color:var(--ink-500);margin:0 0 26px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tag{font:var(--weight-medium) 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);border:1px solid var(--ink-a12);border-radius:var(--radius-pill);padding:8px 14px}
/* brands */
.brands-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.brands-grid{grid-template-columns:1fr}}
.brand{display:block;text-decoration:none;border:1px solid var(--ink-a12);border-radius:var(--radius-xl);padding:52px 48px;transition:var(--transition-surface),border-color var(--duration-base) var(--ease-out-soft)}
.brand:hover{border-color:var(--sea-300);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.brand-shot{aspect-ratio:16/9;overflow:hidden;background:var(--sand-200);border-bottom:1px solid var(--ink-a08);margin:-52px -48px 34px;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.brand-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform var(--duration-slower) var(--ease-out-soft)}
.brand:hover .brand-shot img{transform:scale(1.03)}
.brand-type{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-500);margin-bottom:18px}
.brand-name{font:var(--weight-light) clamp(28px,3vw,40px)/1.12 var(--font-display);letter-spacing:var(--tracking-tight);color:var(--navy-900);margin-bottom:18px}
.brand-name strong{font-weight:var(--weight-semibold);color:var(--sea-500)}
.brand p{font:var(--weight-light) var(--text-base)/1.8 var(--font-body);color:var(--ink-500);margin:0 0 28px}
.brand-url{display:flex;align-items:center;gap:9px;font:var(--weight-medium) var(--text-sm)/1 var(--font-body);letter-spacing:.06em;color:var(--navy-900)}
.brand:hover .brand-url .arw{transform:translate(3px,-3px)}
.arw{display:inline-block;transition:transform var(--duration-fast) var(--ease-out-soft)}
/* credentials */
#credentials{background:var(--sand-100)}
.founder{background:var(--navy-900);border-radius:var(--radius-xl);padding:48px 44px;position:relative;overflow:hidden}
.founder::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--sun-400)}
.founder-title{display:block;font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-400);margin-bottom:16px}
.founder-name{font:var(--weight-medium) 28px/1.2 var(--font-display);color:var(--white);margin-bottom:18px;letter-spacing:var(--tracking-snug)}
.founder p{font:var(--weight-light) var(--text-sm)/1.8 var(--font-body);color:var(--white-a60);margin:0 0 26px}
.founder-social{display:inline-flex;align-items:center;gap:12px;font:var(--weight-regular) var(--text-sm)/1 var(--font-body);color:var(--white-a72);text-decoration:none;letter-spacing:.04em}
.founder-social:hover{color:var(--white)}
.li{width:30px;height:30px;border-radius:8px;background:var(--white-a12);display:grid;place-items:center;font:var(--weight-semibold) 12px/1 var(--font-body);color:var(--white)}
.tagrow.mt{margin-top:34px}
/* contact */
#contact{background:var(--navy-900)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}
.contact-links{margin-top:36px;display:grid;gap:10px}
.contact-links a{font:var(--weight-regular) var(--text-base)/1.6 var(--font-body);color:var(--sun-400);text-decoration:none}
.contact-links a.dim{color:var(--white-a60)}
.contact-links a:hover{color:var(--white)}
.form{background:var(--navy-800);border:1px solid var(--white-a12);border-radius:var(--radius-xl);padding:44px 42px}
.form h3{font:var(--weight-medium) 26px/1.2 var(--font-display);color:var(--white);margin:0 0 6px;letter-spacing:var(--tracking-snug)}
.form>p{font:var(--weight-light) var(--text-sm)/1.6 var(--font-body);color:var(--white-a45);margin:0 0 28px}
.form input,.form select,.form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--white-a12);border-radius:var(--radius-md);color:var(--white);font:var(--weight-light) var(--text-base)/1.5 var(--font-body);padding:15px 18px;outline:none;transition:var(--transition-control);appearance:none;margin-bottom:14px}
.form input::placeholder,.form textarea::placeholder{color:var(--white-a32)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--sun-400);background:rgba(255,255,255,.1)}
.form select option{background:var(--navy-900);color:var(--white)}
.form textarea{resize:vertical;min-height:118px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.disclaimer{font:var(--weight-light) 12px/1.6 var(--font-body);color:var(--white-a32);margin:16px 0 0}
/* footer */
footer{background:var(--navy-900);border-top:1px solid var(--white-a12);padding:76px 0 44px}
.foot-top{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:56px;margin-bottom:52px}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.foot-top{grid-template-columns:1fr}}
.foot-brand img{height:44px;width:auto;margin-bottom:20px}
.foot-brand p{font:var(--weight-light) var(--text-sm)/1.75 var(--font-body);color:var(--white-a45);max-width:38ch;margin:0 0 18px}
.foot-links{display:grid;gap:9px}
.foot-links a{font:var(--weight-regular) var(--text-sm)/1.5 var(--font-body);color:var(--white-a60);text-decoration:none}
.foot-links a:hover{color:var(--sun-400)}
.foot-col h5{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-400);margin:0 0 18px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{font:var(--weight-light) var(--text-sm)/1.4 var(--font-body);color:var(--white-a60);text-decoration:none}
.foot-col a:hover{color:var(--white)}
.foot-rule{height:1px;background:var(--white-a12);margin-bottom:30px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.foot-legal{font:var(--weight-light) 12px/1.7 var(--font-body);color:var(--white-a32);max-width:74ch;margin:0}
.foot-copy{font:var(--weight-light) 12px/1.7 var(--font-body);color:var(--white-a32);margin:0;white-space:nowrap}
/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out-soft),transform .7s var(--ease-out-soft)}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.service:hover,.work:hover{transform:none}
}

/* ---- Sprachwahl: zwei Links, der aktive ist markiert ---- */
.lang{display:flex;align-items:center;gap:2px;padding:5px;border:1px solid var(--ink-a12);border-radius:var(--radius-pill);background:transparent}
.lang a{padding:5px 12px;border-radius:var(--radius-pill);font:var(--weight-medium) 11px/1 var(--font-body);letter-spacing:.1em;color:var(--ink-400);text-decoration:none}
.lang a.on{background:var(--navy-900);color:var(--white)}
.lang a:not(.on):hover{color:var(--navy-900)}

/* ---- Menue auf kleinen Schirmen: Klappmenue statt verschwundener Punkte ---- */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ink-a12);border-radius:var(--radius-pill);cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:var(--navy-900);position:relative;transition:background var(--duration-fast) var(--ease-out-soft)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--navy-900);transition:transform var(--duration-fast) var(--ease-out-soft)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){
  .burger{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--ink-a08);box-shadow:var(--shadow-lg);padding:8px 24px 20px;display:none}
  .nav-links.open{display:flex}
  .nav-links li{border-top:1px solid var(--ink-a08)}
  .nav-links li:first-child{border-top:none}
  .nav-links a{display:block;padding:16px 0;font:var(--weight-medium) var(--text-sm)/1.2 var(--font-body);letter-spacing:.06em}
  .nav-cta{display:block!important;width:100%;margin:14px 0 0;text-align:center;padding:15px 22px;white-space:nowrap}
  .nav-links li:has(.nav-cta){border-top:none}
}

/* ---- Fragen und Antworten ---- */
#faq{background:var(--sand-100)}
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--white);border:1px solid var(--ink-a08);border-radius:var(--radius-lg);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:26px 30px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font:var(--weight-medium) var(--text-md)/1.45 var(--font-display);color:var(--navy-900);letter-spacing:var(--tracking-snug)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font:var(--weight-light) 26px/1 var(--font-display);color:var(--gold-500);transition:transform var(--duration-fast) var(--ease-out-soft)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--sea-500)}
.faq-answer{padding:0 30px 28px;font:var(--weight-light) var(--text-base)/1.8 var(--font-body);color:var(--ink-500)}
.faq-answer p{margin:0 0 14px}
.faq-answer p:last-child{margin:0}
@media(max-width:620px){
  .faq-item summary{padding:22px;font-size:var(--text-base)}
  .faq-answer{padding:0 22px 24px}
}

/* ---- Hero: svh statt vh, sonst schneidet die Adressleiste am Handy ab ---- */
#hero{min-height:100svh}

/* ---- Rueckmeldung des Formulars ---- */
.form-hinweis{margin:16px 0 0;padding:14px 16px;border-radius:var(--radius-md);font:var(--weight-regular) var(--text-sm)/1.55 var(--font-body)}
.form-hinweis.ok{background:rgba(232,188,64,.14);border:1px solid var(--sun-400);color:var(--white)}
.form-hinweis.fehler{background:rgba(214,90,70,.14);border:1px solid var(--coral-500);color:var(--white)}
.form button[disabled]{opacity:.6;cursor:progress}

/* ---- Rechtsseiten ---- */
.legal{background:var(--white);padding:152px 0 96px}
.legal .container{max-width:820px}
.legal h1{font:var(--weight-light) clamp(32px,4vw,var(--text-4xl))/1.14 var(--font-display);color:var(--navy-900);margin:0 0 12px}
.legal h2{font:var(--weight-medium) var(--text-xl)/1.3 var(--font-display);color:var(--navy-900);margin:46px 0 14px}
.legal p,.legal li{font:var(--weight-light) var(--text-base)/1.8 var(--font-body);color:var(--ink-500)}
.legal ul{padding-left:20px;display:grid;gap:8px;margin:0 0 18px}
.legal .zurueck{display:inline-block;margin-top:44px;font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--sea-500);text-decoration:none}
.legal address{font-style:normal}

/* ---- Diese Zeilen waren im Entwurf <div>; als <p> erben sie sonst einen
       Abstand aus der Grundlagen-Datei und verschieben das Layout. ---- */
p.eyebrow,p.quote,p.service-type,p.work-place,p.brand-type,p.brand-name,
p.brand-url,p.founder-title,p.founder-name,p.hero-sub,p.lede{margin-top:0}
p.quote,p.brand-name,p.founder-name{margin-bottom:0}
p.service-type,p.work-place,p.brand-type{margin-bottom:12px}

/* ---- Nur fuer Vorleseprogramme sichtbar ---- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sun-400);color:var(--ink-900);padding:14px 22px;border-radius:0 0 var(--radius-md) 0;font:var(--weight-medium) var(--text-sm)/1 var(--font-body);text-decoration:none}
.skip:focus{left:0}

/* ---- Koederfeld gegen Werberoboter: Menschen sehen es nie ---- */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Beim Sprung aus dem Menue darf die feste Kopfleiste den Anfang
       des Abschnitts nicht verdecken. ---- */
section[id]{scroll-margin-top:100px}
@media(max-width:820px){section[id]{scroll-margin-top:84px}}
#hero{scroll-margin-top:0}

/* ---- Links auf dunklem Grund: das Standardblau ist dort nicht lesbar. ---- */
.disclaimer a,.faq-answer a{color:var(--sun-400);text-decoration-color:var(--sun-600)}
.disclaimer a:hover{color:var(--sun-300)}
.on-dark a:not(.btn):not(.brand):not(.nav-logo){color:var(--sun-400)}
.faq-answer a{color:var(--sea-500);text-decoration-color:var(--sea-200)}

/* ---- Das Logo darf nie gestaucht werden. Es ist ein Flex-Kind in einer
       vollen Kopfleiste; ohne diese Zeilen schrumpft die Breite, waehrend die
       feste Hoehe bleibt — und die Marke wird verzerrt. Gemessen: 169 statt
       226 Pixel breit. ---- */
.nav-logo{flex:0 0 auto;display:block;line-height:0}
.nav-logo img{height:52px;width:auto;max-width:none}
@media(max-width:820px){.nav-logo img{height:40px}}
@media(max-width:380px){.nav-logo img{height:34px}}
.nav-links{min-width:0}

/* ---- Logo auf dunklem Grund: abgesetzt in einem hellen Feld, damit die
       schwarzen Konturen des echten Logos erhalten bleiben. Eine
       Negativfassung wuerde die Innenkontur der Sonne wegfressen. ---- */
.logo-feld{display:inline-block;background:var(--white);border-radius:var(--radius-lg);padding:14px 20px;margin-bottom:22px;line-height:0}
.logo-feld img{height:44px;width:auto;max-width:none;display:block}
@media(max-width:620px){.logo-feld{padding:12px 16px}.logo-feld img{height:38px}}

/* ---- Menuepunkte nie umbrechen: "Über uns" ist sonst zweizeilig. ---- */
.nav-links > li > a{white-space:nowrap}

/* ---- Fussbereich hell ------------------------------------------------
   Statt das Logo in einen weissen Kasten zu setzen, wird der ganze
   Fussbereich hell. Dann steht das echte Logo mit seinen schwarzen Konturen
   auf dem Grund, fuer den es gemacht ist — ohne Rahmen. Der dunkle
   Kontaktbereich darueber setzt sich dadurch klar ab. ---- */
footer{background:var(--sand-100);border-top:1px solid var(--ink-a08)}
.foot-brand p{color:var(--ink-500)}
.foot-links a{color:var(--ink-500)}
.foot-links a:hover{color:var(--navy-900)}
.foot-col h5{color:var(--gold-600)}
.foot-col a{color:var(--ink-500)}
.foot-col a:hover{color:var(--navy-900)}
.foot-rule{background:var(--ink-a08)}
.foot-legal,.foot-copy{color:var(--ink-400)}
.foot-legal a{color:var(--ink-500)}
.foot-legal a:hover{color:var(--navy-900)}

/* Das Logo braucht hier kein Feld mehr. */
.logo-feld{display:inline-block;background:none;padding:0;border-radius:0;margin-bottom:22px;line-height:0}
.logo-feld img{height:46px;width:auto;max-width:none;display:block}
@media(max-width:620px){.logo-feld img{height:40px}}

/* ---- Dritter Leistungsblock: volle Breite unter den beiden Schwerpunkten.
       Er soll sichtbar dazugehoeren, aber den beiden Kernbereichen nicht die
       Aufmerksamkeit nehmen — deshalb ruhiger und quer statt daneben. ---- */
.service--breit{grid-column:1 / -1;--accent:var(--gold-400)}
.service--breit .service-inhalt{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.service--breit .service-inhalt{grid-template-columns:1fr;gap:28px}}
.service--breit ul{margin:0}
.service--breit p{margin-bottom:0}