/* ============================================================
   da-server.cloud – Landingpage
   Klassenloses CSS: alle Selektoren über Elemente, IDs,
   Attribute, :has(), :nth-child() usw.
   ============================================================ */

/* ---------- Schriften: lokal, variable Fonts, Gewichtsachse auf die genutzten
   Stärken begrenzt (Lexend 500–700, Open Sans 400–700), Zeichensatz Latin-1 ---------- */
@font-face{font-family:"Lexend";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/lexend.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/open-sans.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --navy:#021c3f;--navy-2:#0a2a5c;--navy-3:#123a78;--navy-4:#1d4f9c;
  --orange:#fe5714;--orange-d:#e4460a;--orange-l:#ff8a5c;
  /* dunkleres Orange für Text/Buttons auf hellem Grund (Kontrast ≥ 4.5:1) */
  --orange-text:#c93c08;--orange-text-d:#a83205;
  --ink:#0f2240;--muted:#5a687c;--line:#e3e9f0;--soft:#f3f6fa;
  --head:Lexend,"Open Sans",system-ui,sans-serif;
  /* seitlicher Abstand = zentrierter Inhaltsbereich von max. 1052px */
  --pad:max(24px,calc((100% - 1052px) / 2));
  --header-h:68px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.7 "Open Sans",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.2}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
main > section{padding:90px var(--pad)}

/* ---------- Überschriften-Gruppen ---------- */
/* Dachzeile: <p> direkt vor der Überschrift */
hgroup > p:has(+ :is(h1,h2)){
  margin:0 0 14px;color:var(--orange-text);
  font:600 11px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;
}
/* Unterzeile: <p> nach der Überschrift */
hgroup > :is(h1,h2) + p{margin:12px auto 0;max-width:540px;color:var(--muted)}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.18}

/* ---------- Buttons ---------- */
#start > a,#kontakt > a{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 34px;border-radius:999px;
  background:var(--orange-text);color:#fff;text-decoration:none;
  font:600 14px/1.2 var(--head);
  box-shadow:0 10px 24px -10px rgb(254 87 20 / .7);
  transition:transform .2s,background .2s;
}
#start > a::after{content:"↗"}
:is(#start,#kontakt) > a:hover{background:var(--orange-text-d);transform:translateY(-2px)}

/* ---------- Kopfzeile ---------- */
body > header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--header-h);padding-inline:var(--pad);
  background:rgb(255 255 255 / .96);backdrop-filter:blur(8px);
  border-bottom:1px solid #edf1f5;
}
body > header img{height:34px;width:auto}
body > header nav{display:flex;gap:34px;font:500 13px var(--head)}
body > header nav a{
  padding:22px 0;color:#3b4a60;text-decoration:none;
  /* Unterstrich als Hintergrund, Breite 0 = unsichtbar */
  background:linear-gradient(var(--orange),var(--orange)) no-repeat center bottom 12px / 0 2px;
}
body > header nav a:hover{color:var(--orange-text)}

/* ---------- Aktiver Menüpunkt beim Scrollen – reines CSS ----------
   Jede Section liefert eine View-Timeline. Die Inset-Angabe schrumpft
   den Messbereich auf die Linie in der Bildschirmmitte: Ein Link ist
   aktiv, solange „seine“ Section diese Linie kreuzt.               */
@supports (animation-timeline: view()){
  html{timeline-scope:--start,--leistungen,--betreuung,--infrastruktur,--ueber-uns,--kontakt}
  main > section{view-timeline-inset:50% calc(50% - 1px)}
  #start{view-timeline-name:--start}
  #leistungen{view-timeline-name:--leistungen}
  #betreuung{view-timeline-name:--betreuung}
  #infrastruktur{view-timeline-name:--infrastruktur}
  #ueber-uns{view-timeline-name:--ueber-uns}
  #kontakt{view-timeline-name:--kontakt}

  nav a{animation:nav-on linear;animation-range:cover}
  nav a[href="#start"]{animation-timeline:--start}
  nav a[href="#leistungen"]{animation-timeline:--leistungen}
  nav a[href="#betreuung"]{animation:nav-on linear,nav-on linear;animation-timeline:--betreuung,--infrastruktur;animation-range:cover}
  nav a[href="#ueber-uns"]{animation-timeline:--ueber-uns}
  nav a[href="#kontakt"]{animation-timeline:--kontakt}
}
@keyframes nav-on{from,to{color:var(--orange-text);background-size:100% 2px}}

/* ---------- Hero ---------- */
#start{
  padding-top:96px;padding-bottom:300px;
  text-align:center;color:#fff;
  background:
    url("../img/hero-welle.svg") center bottom / 100% 150px no-repeat,
    url("../img/hero-server.svg") center bottom 70px / min(1200px,100%) auto no-repeat,
    radial-gradient(circle at 6% 20px,#3b6fc4 0,#0b2a5a 60px,#0000 61px),
    radial-gradient(circle at calc(100% + 25px) 115px,#ff9e78 0,#c63d07 75px,#0000 76px),
    radial-gradient(circle at calc(3% + 40px) calc(100% - 190px),#3b6fc4 0,#123a78 40px,#0000 41px),
    radial-gradient(circle at 88% calc(100% - 232px),#ffb497 0,var(--orange) 22px,#0000 23px),
    radial-gradient(120% 90% at 50% 0%,#0e3470 0%,#06244f 45%,var(--navy) 100%);
}
h1{font-size:clamp(40px,6.4vw,70px);line-height:1.08;letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--orange)}
#start hgroup > p{color:var(--orange)}
#start > p{max-width:560px;margin:18px auto 30px;color:#c8d4e8;font-size:16px}

/* ---------- Leistungen ---------- */
#leistungen{padding-top:70px}
:is(#leistungen,#kontakt) hgroup{text-align:center}
:is(#leistungen,#kontakt) h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.01em}
#leistungen ul{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  margin:56px 0 0;padding:0;list-style:none;text-align:center;
}
#leistungen li{padding:10px}
#leistungen li::before{
  content:"";display:block;width:74px;height:66px;margin:0 auto 16px;
  background:var(--icon) center / contain no-repeat;transition:transform .3s;
}
#leistungen li:hover::before{transform:translateY(-4px)}
#leistungen li:nth-child(1){--icon:url("../img/icon-webhosting.svg")}
#leistungen li:nth-child(2){--icon:url("../img/icon-email.svg")}
#leistungen li:nth-child(3){--icon:url("../img/icon-domains.svg")}
#leistungen li:nth-child(4){--icon:url("../img/icon-backups.svg")}
h3{font-size:16px;font-weight:600;margin-bottom:8px}
#leistungen li p{margin:0 auto;max-width:220px;font-size:13.5px;color:var(--muted)}

/* ---------- Wellen-Bänder (Betreuung / Infrastruktur) ---------- */
:is(#betreuung,#infrastruktur){
  display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:auto auto;
  column-gap:40px;align-items:center;
  padding-block:110px;color:#fff;
  background:url("../img/welle-betreuung.svg") center / 100% 100% no-repeat;
}
:is(#betreuung,#infrastruktur) hgroup{align-self:end}
:is(#betreuung,#infrastruktur) hgroup > p{color:var(--orange-l)}
:is(#betreuung,#infrastruktur,#ueber-uns) hgroup::after{
  content:"";display:block;width:46px;height:3px;margin:20px 0 22px;
  background:var(--orange);border-radius:2px;
}
:is(#betreuung,#infrastruktur) > p{align-self:start;max-width:430px;margin:0;color:#d6e1f3}
/* Illustration als Pseudo-Element im Grid */
#betreuung::after,#infrastruktur::before{
  content:"";grid-row:1 / 3;width:100%;max-height:360px;
  background:center / contain no-repeat;
  filter:drop-shadow(0 22px 26px rgb(1 14 36 / .35));
  animation:float 6s ease-in-out infinite;
}
#betreuung::after{grid-column:2;aspect-ratio:600/365;background-image:url("../img/illustration-betreuung.svg")}

#infrastruktur{grid-template-columns:1.1fr .9fr;text-align:right;background-image:url("../img/welle-infrastruktur.svg")}
#infrastruktur > *{grid-column:2}
#infrastruktur > p,#infrastruktur hgroup::after{margin-left:auto}
#infrastruktur::before{grid-column:1;aspect-ratio:600/360;background-image:url("../img/illustration-infrastruktur.svg");animation-delay:-3s}
@keyframes float{50%{translate:0 -8px}}

/* ---------- Über uns ---------- */
#ueber-uns{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:center;
  margin-top:40px;padding-block:110px;background:var(--soft);
}
#ueber-uns::before{ /* dekorativer Ring */
  content:"";position:absolute;right:-160px;top:-180px;width:420px;height:420px;
  border:1px solid rgb(254 87 20 / .18);border-radius:50%;
}
#ueber-uns > :not(ol){grid-column:1}
#ueber-uns > p{max-width:470px;margin:0 0 14px;color:var(--muted)}
/* Ansprechpartner-Zeile */
#ueber-uns > p:has(strong){
  display:grid;grid-template-columns:58px 1fr auto;column-gap:16px;align-items:center;
  margin-top:16px;padding-top:26px;border-top:1px solid var(--line);
}
#ueber-uns > p:has(strong)::before{
  content:"DA" / "";grid-row:1 / 3;display:grid;place-items:center;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(150deg,var(--navy-3),var(--navy));color:#fff;
  font:600 18px var(--head);
  box-shadow:0 0 0 3px var(--soft),0 0 0 5px var(--orange);
}
#ueber-uns strong{font:600 16px/1.3 var(--head);color:var(--navy)}
#ueber-uns small{grid-column:2;font-size:13px}
#ueber-uns > p a{grid-column:3;grid-row:1 / 3;color:var(--orange-text);text-decoration:none;font:600 13px var(--head)}
#ueber-uns > p a::after{content:" →"}
#ueber-uns > p a:hover{color:var(--orange-text-d)}
/* Leistungsliste mit automatischer Nummerierung */
#ueber-uns ol{
  grid-column:2;grid-row:1 / span 4;
  margin:0;padding:44px 44px 48px;list-style:none;counter-reset:nr;
  background:linear-gradient(160deg,var(--navy-3),var(--navy) 70%);color:#fff;
  border-radius:22px 22px 22px 90px;
  box-shadow:0 30px 60px -30px rgb(2 28 63 / .6);
}
#ueber-uns ol::before{
  content:"Das übernehmen wir für Sie" / "";display:block;margin-bottom:12px;
  color:var(--orange-l);font:600 11px var(--head);letter-spacing:.18em;text-transform:uppercase;
}
#ueber-uns li{
  counter-increment:nr;display:grid;grid-template-columns:40px 1fr;align-items:center;
  padding:15px 0;font:500 15.5px var(--head);
}
#ueber-uns li + li{border-top:1px solid rgb(255 255 255 / .12)}
#ueber-uns li::before{content:counter(nr,decimal-leading-zero);font-size:12px;color:var(--orange-l);font-variant-numeric:tabular-nums}
#ueber-uns li:last-child{color:var(--orange-l)}

/* ---------- Kontakt ---------- */
#kontakt{padding-block:100px 110px;text-align:center}
#kontakt hgroup::after{ /* Monitor-Illustration */
  content:"";display:block;width:min(420px,90%);aspect-ratio:420/260;margin:46px auto 30px;
  background:url("../img/kontakt-monitor.svg") center / contain no-repeat;
}
#kontakt > p{max-width:520px;margin:0 auto;color:var(--muted)}
address{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin:46px 0 40px;font-style:normal;text-align:left;
}
/* jede Kontaktkarte: Icon links, Label oben, Wert darunter */
address > *{
  display:grid;grid-template-columns:38px 1fr;column-gap:16px;align-content:start;
  margin:0;padding:20px 22px;background:#fff;
  border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 26px -20px rgb(2 28 63 / .3);
  text-decoration:none;transition:translate .2s,border-color .2s;
}
address > *::before{content:"";grid-column:1;grid-row:1 / 3;width:38px;height:38px;background:var(--icon) center / contain no-repeat}
address > *::after{
  content:var(--label) / "";grid-column:2;grid-row:1;
  color:var(--muted);font:600 11px/1.6 var(--head);letter-spacing:.12em;text-transform:uppercase;
}
address > a{color:var(--navy);font:600 15px/1.45 var(--head);overflow-wrap:anywhere}
address > a:hover{translate:0 -3px;border-color:var(--orange)}
address > p{color:var(--muted);font-size:13.5px;line-height:1.55}
address > [href^="mailto"]{--icon:url("../img/icon-mail.svg");--label:"E-Mail"}
address > [href^="tel"]{--icon:url("../img/icon-telefon.svg");--label:"Telefon"}
address > p{--icon:url("../img/icon-adresse.svg");--label:"Adresse"}

/* ---------- Fußzeile ---------- */
body > footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;
  padding:22px var(--pad);background:var(--navy);color:#9fb0c9;font-size:12.5px;
}
body > footer > a{margin-right:auto}
body > footer img{height:28px;width:auto}
body > footer p{margin:0}
body > footer small{font-size:inherit}
body > footer nav{display:flex;gap:18px}
body > footer button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
body > footer button:hover{color:#fff;text-decoration:underline}
body > footer button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ---------- Impressum & Datenschutz (Popover-Dialoge, ohne JS) ---------- */
dialog[popover]{
  width:min(720px,calc(100% - 32px));max-height:min(85vh,900px);overflow:auto;overscroll-behavior:contain;
  margin:auto;padding:0 48px 40px;border:0;border-radius:16px;
  background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgb(2 28 63 / .55);
  opacity:0;translate:0 16px;
  transition:opacity .25s,translate .25s,overlay .25s allow-discrete,display .25s allow-discrete;
}
dialog[popover]:popover-open{opacity:1;translate:0 0}
@starting-style{dialog[popover]:popover-open{opacity:0;translate:0 16px}}
dialog[popover]::backdrop{
  background:rgb(2 28 63 / 0);backdrop-filter:blur(0);
  transition:background .25s,backdrop-filter .25s,overlay .25s allow-discrete,display .25s allow-discrete;
}
dialog[popover]:popover-open::backdrop{background:rgb(2 28 63 / .6);backdrop-filter:blur(4px)}
@starting-style{dialog[popover]:popover-open::backdrop{background:rgb(2 28 63 / 0);backdrop-filter:blur(0)}}
html:has(dialog:popover-open){overflow:hidden}

/* Schließen-Button: klebt oben rechts, Kreuz per CSS */
dialog > button{
  position:sticky;top:16px;float:right;margin:16px -32px 0 0;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--soft);color:var(--navy);font:400 24px/1 var(--head);
  transition:background .2s,color .2s;
}
dialog > button::before{content:"×"}
dialog > button:hover{background:var(--orange);color:#fff}
dialog > button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
dialog h2{padding-top:44px;font-size:clamp(26px,3vw,32px)}
dialog h2::after{content:"";display:block;width:46px;height:3px;margin:16px 0 8px;background:var(--orange);border-radius:2px}
dialog h3{margin:28px 0 6px;font-size:15px}
dialog :is(p,ul){margin:0 0 10px;color:#3d4b60;font-size:14.5px}
dialog ul{padding-left:20px}
dialog a{color:var(--orange-text);text-decoration:none}
dialog a:hover{text-decoration:underline}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  #leistungen ul{grid-template-columns:repeat(2,1fr);gap:40px 20px}

  :is(#betreuung,#infrastruktur){
    grid-template-columns:1fr;row-gap:0;text-align:left;
    margin-bottom:30px;padding-block:80px;
    background:linear-gradient(150deg,var(--navy-4),var(--navy-2) 55%,var(--navy));
    border-radius:0 0 60% 20% / 0 0 60px 40px;
  }
  #infrastruktur{border-radius:20% 60% 0 0 / 40px 60px 0 0;margin-top:30px}
  #infrastruktur > *,#betreuung::after,#infrastruktur::before{grid-column:1}
  #betreuung::after{grid-row:3}
  #infrastruktur::before{grid-row:1}
  #betreuung::after,#infrastruktur::before{max-width:460px;justify-self:center;margin-block:30px}
  #infrastruktur > p,#infrastruktur hgroup::after{margin-left:0}

  #ueber-uns{grid-template-columns:1fr;row-gap:0}
  #ueber-uns ol{grid-column:1;grid-row:auto;margin-top:44px}

  address{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
}

/* ---------- Smartphone ---------- */
@media (max-width:640px){
  :root{--pad:16px}
  body > header nav{gap:16px;font-size:12px}
  nav a:is([href="#start"],[href="#ueber-uns"]){display:none}
  body > header img{height:26px}
  main > section{padding-block:64px}
  #start{
    padding-top:64px;padding-bottom:170px;
    background-size:100% 80px,100% auto,auto,auto,auto,auto,auto;
    /* rechte Kugeln aus dem Bild schieben, damit sie keinen Text verdecken */
    background-position:center bottom,center bottom 50px,0 0,-9999px 0,0 0,-9999px 0,0 0;
    background-repeat:no-repeat;
  }
  :is(#betreuung,#infrastruktur){padding-block:80px}
  #ueber-uns{padding-block:80px}
  #ueber-uns ol{padding:30px 24px 34px;border-radius:18px 18px 18px 60px}
  #leistungen li p{font-size:12.5px}
  dialog[popover]{padding:0 22px 28px}
  dialog > button{margin-right:-8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #betreuung::after,#infrastruktur::before{animation:none}
  *,*::before,*::after{transition:none !important}
}