/* Vorlage für eigene Seiten (Plan 78, Aufgabe 7). Optik wie die Framer-Seiten: schwarz, Figtree/Inter, grüner Akzent.
   Einmal hier pflegen; gilt für alle Seiten, die aus deploy/template/ erzeugt wurden. */
@font-face{font-family:"Figtree";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/e72dbdaba400d739-_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_dNQF5bwkEU4HTy.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/b01f989e9ec4947c-_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_eYR15bwkEU4HTy.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/framer/assets/vQyevYAyHtARFwPqUzQGpnDs.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/framer/assets/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--bg:#000;--white:#fff;--link:#ccc;--text:rgba(242,242,242,.63);--green:rgba(21,153,118,.73);--line:rgba(255,255,255,.12);--ui:"Figtree",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:auto}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
img{max-width:100%;height:auto}

/* Kopfzeile */
.site-header{display:flex;align-items:center;justify-content:space-between;height:86px;padding:0 40px;border-bottom:1px solid var(--line);position:relative}
.site-header .logo{display:block;line-height:0}
.site-header .logo img{width:132px;height:auto}
.site-nav{display:flex;align-items:center;gap:2px;font:500 14px/1 var(--ui);letter-spacing:-.02em}
.site-nav a{color:var(--white);text-decoration:none;padding:8px 14px;border-radius:4px}
.site-nav a:hover{background:rgba(255,255,255,.08)}
.site-nav a.btn{margin-left:16px;padding:9px 13px;border-radius:6px;background:var(--green);box-shadow:0 .7px .7px -.6px rgba(0,0,0,.15),0 2px 2px -1.2px rgba(0,0,0,.14)}
.site-nav a.btn:hover{background:rgba(21,153,118,.9)}
.nav-toggle,.burger{display:none}

/* Inhalt */
main.page{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:48px 40px 64px}
main.page h1,main.page h2,main.page h3{font-family:var(--ui);color:var(--white);letter-spacing:-.02em;line-height:1.15}
main.page h1{font-size:44px;font-weight:700;margin:0 0 24px}
main.page h2{font-size:28px;font-weight:700;margin:40px 0 12px}
main.page p,main.page li{max-width:720px}
main.page a{color:var(--white)}
main.page .btn{display:inline-block;background:var(--green);color:var(--white);text-decoration:none;font:500 14px/1 var(--ui);padding:12px 18px;border-radius:6px}

/* Fußzeile */
.site-footer{margin-top:auto;border-top:1px solid var(--line);background-image:radial-gradient(50% 50% at 50% 3.4%,rgba(34,34,34,.3) 0%,rgba(171,171,171,0) 100%);font-family:var(--ui)}
.footer-main{display:grid;grid-template-columns:610px 200px 1fr;max-width:1200px;margin:0 auto;padding:64px 0}
.footer-brand img{display:block;width:202px;height:auto}
.footer-brand p{margin:16px 0 0 54px;max-width:300px;font:500 16px/22.4px var(--ui);letter-spacing:-.02em;color:#ccc}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col h2{margin:0 0 6px;font:500 18px/1.5 var(--ui);letter-spacing:-.02em;color:var(--white)}
.footer-col a{color:var(--link);text-decoration:none;font:500 16px/1.4 var(--ui);letter-spacing:-.02em}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid var(--line);padding:25px 40px;font:500 14px/1.2 var(--ui);letter-spacing:-.02em;color:var(--link)}

/* Handy und Tablet */
@media (max-width:809.98px){
  .site-header{height:64px;padding:0 20px}
  .site-header .logo{position:absolute;left:50%;transform:translateX(-50%)}
  .site-header .logo img{width:100px}
  .burger{display:flex;flex-direction:column;gap:6px;margin-left:auto;padding:10px;cursor:pointer}
  .burger span{display:block;width:26px;height:2px;background:var(--white)}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 20px;background:var(--bg);border-bottom:1px solid var(--line);font-size:16px}
  .site-nav a{padding:14px 8px}
  .site-nav a.btn{margin:12px 0 0;text-align:center}
  .nav-toggle:checked ~ .site-nav{display:flex}
  main.page{padding:32px 20px 48px}
  main.page h1{font-size:32px}
  .footer-main{grid-template-columns:1fr 1fr;gap:24px 0;padding:40px 20px}
  .footer-brand{grid-column:1 / -1}
  .footer-brand p{margin-left:0}
  .footer-bottom{padding:20px;text-align:center}
}

/* ONEtonics-Produktseite (Plan 82, Aufgabe 3/4) - Optik wie Start- und Ueber-uns-Seite: zentriert, Pill-Tags, grosse Ueberschriften */
main.one{max-width:1100px;padding-top:0}
main.one section{margin:0 auto 112px;text-align:center;position:relative}
main.one .pill{display:inline-block;margin:0 0 24px;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#0a0a0a;color:var(--white);font:500 14px/1 var(--ui);letter-spacing:-.02em}
main.one .hero{padding:96px 0 0;margin-bottom:120px}
main.one .hero::before{content:"";position:absolute;left:50%;top:-40px;width:900px;max-width:100%;height:340px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(21,153,118,.16) 0%,rgba(21,153,118,0) 100%);pointer-events:none;z-index:-1}
main.one h1{font-size:64px;font-weight:600;line-height:1.1;letter-spacing:-.03em;max-width:900px;margin:0 auto 24px}
main.one h2{font-size:48px;font-weight:500;line-height:1.1;letter-spacing:-.03em;margin:0 auto 20px;max-width:800px}
main.one p,main.one li{color:#cfcfcf;font-size:18px;line-height:1.5}
main.one section>p{margin-left:auto;margin-right:auto;max-width:680px}
main.one .lead{font-size:20px;max-width:720px;margin:0 auto}
main.one section>p.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:32px auto 0;max-width:none}
main.page .btn.ghost{background:#0a0a0a;border:1px solid rgba(255,255,255,.12);color:var(--white)}
main.page .btn.ghost:hover{background:rgba(255,255,255,.08)}
main.one h3{font-size:22px;font-weight:600;color:var(--white);margin:0 0 8px}
main.one h3.sub{margin:64px 0 24px;font-size:28px;font-weight:500}
main.one h4{font:600 18px/1.3 var(--ui);color:var(--white);margin:0 0 8px;letter-spacing:-.02em}
main.one .cards{display:grid;gap:16px;margin-top:40px;text-align:left}
main.one .cards.three{grid-template-columns:repeat(3,1fr)}
main.one .cards.four{grid-template-columns:repeat(4,1fr);margin-top:0}
main.one .card{padding:24px;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:#0a0a0a}
main.one .card p{margin:0;font-size:15px;color:#b5b5b5}
main.one .steps,main.one .plain{max-width:720px;margin:32px auto 0;padding-left:22px;text-align:left}
main.one .steps li,main.one .plain li{margin:0 0 14px;max-width:none}
main.one .steps strong,main.one .plain strong{color:var(--white);font-weight:600}
main.one .diagram:empty{display:none}
main.one .soon{padding:56px 40px;border:1px dashed rgba(21,153,118,.6);border-radius:24px;background:rgba(21,153,118,.06)}
main.one .contact{padding:0;margin-bottom:40px}
@media (max-width:1000px){main.one .cards.four{grid-template-columns:repeat(2,1fr)}main.one .cards.three{grid-template-columns:1fr}}
@media (max-width:809.98px){
  main.one .hero{padding-top:48px;margin-bottom:72px}
  main.one section{margin-bottom:72px}
  main.one h1{font-size:36px}
  main.one h2{font-size:32px}
  main.one p,main.one li{font-size:16px}
  main.one .lead{font-size:17px}
  main.one .cards.four{grid-template-columns:1fr}
  main.one .soon{padding:32px 20px}
}

/* Kartenstil und Schaubild (Aufgabe 4) */
main.one .card{position:relative;overflow:hidden;padding:30px 30px 34px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#000}
main.one .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:radial-gradient(60% 80% at 50% 110%,rgba(21,153,118,.38) 0%,rgba(21,153,118,0) 100%);pointer-events:none}
main.one .card>*{position:relative;z-index:1}
main.one .card .ico{display:block;margin:0 0 18px}
main.one .card h3,main.one .card h4{font:400 22px/1.25 var(--ui);color:var(--white);letter-spacing:-.02em;margin:0 0 12px}
main.one .card p{font-size:16px;line-height:1.5;color:#cfcfcf}
main.one .split{display:grid;grid-template-columns:minmax(0,450px) 1fr;gap:56px;align-items:center;margin-top:48px;text-align:left}
main.one .split .steps{margin:0}
main.one .visual{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1/1}
main.one .visual svg{display:block;width:100%;height:100%}
@media (max-width:809.98px){main.one .split{grid-template-columns:1fr;gap:32px}main.one .card{padding:24px}}

main.one .mailline{margin:20px auto 0;font-size:15px}
main.one .mailline a{color:var(--white)}
main.one .copy{margin-left:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0a0a0a;color:var(--white);font:500 13px/1 var(--ui);cursor:pointer}
main.one .copy:hover{background:rgba(255,255,255,.08)}

/* Kopfzeile bleibt beim Scrollen sichtbar, Inhalt max. 1356px breit und zentriert (wie Framer-Seiten) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-left:max(40px,calc((100% - 1356px) / 2));padding-right:max(40px,calc((100% - 1356px) / 2))}
@media (max-width:809.98px){.site-header{padding-left:20px;padding-right:20px}}

/* Fusszeile wie auf den Framer-Seiten (Desktop): Logo links, Slogan ab Mitte-600px, Spalten bei Mitte+10px und Mitte+210px */
@media (min-width:810px){
  .footer-main{max-width:none;margin:0;padding:64px 0 64px 40px;grid-template-columns:max(0px,calc(50% - 620px)) 610px 200px 1fr;align-items:start}
  .footer-brand{display:contents}
  .footer-brand img{grid-column:1 / 3;grid-row:1;width:202px;height:100px;object-fit:contain;margin:0;justify-self:start}
  .footer-brand p{grid-column:2;grid-row:1;margin:110px 0 0;max-width:300px;font:500 16px/22.4px var(--ui);letter-spacing:-.02em;color:#ccc}
  .footer-col{grid-row:1;margin-top:50px;gap:9px}
  .footer-col h2{font:500 18px/1.5 var(--ui);margin:0 0 -1px}
  .footer-col a{font:500 16px/20.4px var(--ui);letter-spacing:-.02em;color:var(--link)}
}