/* Dachseite und Projektseiten -- gleiche Handschrift wie die Energieseite. */
/* SAND UND TUERKIS -- Robert am 10.8.2026: "kannst du den hintergrund eher sandfarben machen
   und mit entsprechender struktur?" und "ein wenig malediventuerkis wuerde ich auch gerne
   ausprobieren". Die Grautoene sind dabei nachgedunkelt worden: Auf Sand statt Fastweiss faellt
   der Kontrast, #5f6f68 waere auf 4,0:1 gerutscht und damit unter die Lesbarkeitsschwelle.
   Jetzt 5,0:1. Gemessen, nicht geschaetzt. */
:root{--ink:#181d1a;--soft:#4b584f;--line:#ded8d4;--bg:#e6e0cc;--white:#fffdfc;
      --sun:#f5a623;--sund:#c97b09;--red:#d6371f;--dark:#141a17;--green:#1f8f63;
      --tuerkis:#1fbcc4;--tuerkisd:#0b8b93;--tuerkist:#076f77;
      /* Schattenwurf, der zur Duenung/Riffelung im Sand passt: warmer Sandton statt
         neutralem Schwarz, zwei Ebenen (weich+weit, dann enger+dunkler) wie Licht,
         das flach ueber Wellen faellt. */
      --duenschatten:0 20px 38px -8px rgba(90,64,38,.45),0 6px 14px rgba(90,64,38,.28)}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;font-size:16px;line-height:1.6}
.wrap{max-width:1040px;margin:0 auto;padding:0 26px}
h1,h2,h3,.wordmark,.mark,.n{font-family:"Space Grotesk",sans-serif;letter-spacing:-.02em}
a{color:inherit}

/* Kopf */
nav{display:flex;align-items:center;padding:20px 0;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:60px;height:60px;background:var(--red);display:flex;flex-direction:column;
      align-items:center;justify-content:flex-end;padding-bottom:8px;color:#fff;line-height:1;
      box-shadow:0 4px 14px rgba(214,55,31,.30)}
.mark b{font-size:12px;font-weight:700;letter-spacing:3.5px;padding-left:3.5px}
.mark small{font-size:7.4px;font-weight:600;letter-spacing:.3px;margin-top:3px}
.wordmark{font-weight:700;font-size:16px;text-transform:lowercase}
.wordmark span{color:var(--soft);font-weight:500}
nav .r{margin-left:auto;font-size:13px;color:var(--soft)}
nav .r a{text-decoration:none}
nav .r a:hover{color:var(--sund)}
nav .r .hier{color:var(--ink);font-weight:600}   /* die Seite, auf der man ist */

/* Aufmacher */
.hero{position:relative;padding:44px 0 54px;overflow:hidden}
.sun{position:absolute;top:-100px;right:-70px;width:360px;height:360px;border-radius:0;
     background:radial-gradient(circle,rgba(245,166,35,.5),rgba(245,166,35,.1) 45%,transparent 70%);
     animation:pulse 6s ease-in-out infinite;pointer-events:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.tag{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;
     color:var(--sund);font-weight:600}
.hero h1{font-size:clamp(36px,6vw,64px);line-height:1.04;margin:18px 0 16px;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--sund)}
.hero p{font-size:19px;color:var(--soft);max-width:58ch}
.rv{opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
.rv:nth-child(3){animation-delay:.08s}.rv:nth-child(4){animation-delay:.16s}
@keyframes rise{to{opacity:1;transform:none}}
.cta{display:inline-block;margin-top:24px;background:var(--dark);color:#fff;text-decoration:none;
     padding:14px 26px;border-radius:0;font-weight:600;font-size:15px}
.cta.sun{background:var(--sun);color:#3a2a06}

section{padding:44px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
h2{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--soft);
   font-weight:600;margin-bottom:8px}
.h2big{font-size:26px;color:var(--ink);margin-bottom:22px;font-family:"Space Grotesk"}
p{max-width:70ch}

/* Projektkarten */
.projekte{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.karte{background:var(--white);border:1px solid var(--line);border-radius:0;padding:26px;
       display:flex;flex-direction:column;text-decoration:none;transition:.18s;
       box-shadow:var(--duenschatten)}
.karte:hover{border-color:var(--sun);transform:translateY(-2px);
       box-shadow:0 28px 46px -10px rgba(90,64,38,.5),0 8px 16px rgba(90,64,38,.3)}
.karte .st{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;
           padding:3px 9px;border-radius:0;align-self:flex-start;margin-bottom:14px}
.st.live{background:#e7f2ec;color:var(--green)}
.st.bau{background:#fdefd6;color:var(--sund)}
.st.ruhe{background:#eeeeea;color:#78807b}
.karte h3{font-size:23px;margin-bottom:8px}
.karte p{font-size:14.5px;color:var(--soft);flex:1}
.karte .mehr{margin-top:16px;font-size:14px;font-weight:600;color:var(--sund)}

/* Ruhige Liste -- als Spalten, Robert 10.9.2026: "Schrift etwas groesser,
   Texte in Spalten sauber ueber". Drei Spalten (Leistung / Beschreibung /
   Modell+Preis), je Zeile an der Grundlinie ausgerichtet, damit alle Zeilen
   sauber untereinanderstehen statt im Flow zu verrutschen. */
.liste div{padding:18px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:15ch 1fr auto;gap:4px 26px;align-items:baseline}
.liste b{font-family:"Space Grotesk";font-size:18px}
.liste span{color:var(--soft);font-size:16px}
.liste .modell{color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;text-align:right}
@media(max-width:760px){
  .liste div{grid-template-columns:1fr;gap:4px}
  .liste .modell{text-align:left}
}

/* Dunkler Block */
.block{background:var(--dark);color:#eef3f0;border-radius:0;padding:32px;box-shadow:var(--duenschatten)}
.block h3{font-size:25px;color:#fff;margin-bottom:12px}
.block p{color:#b9c6c0;font-size:15.5px}
.block .punkte{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
.block .punkte p{padding:9px 0;border-bottom:1px solid #ffffff14;font-size:14.5px;color:#d8e2dd;max-width:none}
.block .punkte p b{color:var(--sun);font-family:"Space Grotesk";font-weight:600}

.hinw{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--sun);
      padding:13px 16px;font-size:14px;color:#4a5551;margin:18px 0;max-width:70ch;
      box-shadow:0 14px 26px -8px rgba(90,64,38,.36),0 4px 9px rgba(90,64,38,.20)}

footer{padding:34px 0 60px;border-top:1px solid var(--line);display:flex;gap:22px;
       align-items:center;flex-wrap:wrap;color:var(--soft);font-size:14px}
footer .rechts{margin-left:auto}

@media(max-width:760px){
  .projekte,.block,.block .punkte{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* Zitatzeile -- Roberts Wunsch vom 3.7.2026: oben ein Satz von jemand anderem, taeglich anders.
   Bewusst leise: Sie soll die Seite grundieren, nicht sich vordraengen. */
.zitatzeile{margin:2px 0 -6px;padding:10px 0 0;border-top:1px solid var(--line);
            font-size:14px;line-height:1.55;color:var(--soft)}
.zitatzeile .zt{font-style:italic}
.zitatzeile .zq{white-space:nowrap;font-size:12.5px;opacity:.8}
.zitatzeile:empty{display:none}
@media(max-width:640px){.zitatzeile{font-size:13px}}

/* Die oberste Zeile bleibt stehen. Robert am 10.8.2026: "lass bitte die oberste zeile fest,
   damit sie beim scrollen nicht verschwindet". Der Streifen bekommt denselben Hintergrund wie
   die Seite und eine feine Kante, sonst laeuft der Text beim Scrollen dahinter durch. */
.wrap:first-of-type{position:sticky;top:0;z-index:50;background-color:var(--bg);background-image:url("sand2.svg"),url("sand.svg");background-size:830px 830px,1200px 1200px}
@media(max-width:640px){.wrap:first-of-type{position:static}}

/* Signet in Kleinbuchstaben -- Robert am 10.8.2026: "probier das signet mal mit
   kleinbuchstaben aus". Versalien brauchen viel Sperrung, Gemeine brauchen weniger,
   sonst faellt das Wort auseinander. Deshalb hier engere Laufweite und etwas mehr Groesse. */
.mark b{font-size:14px;letter-spacing:1.6px;padding-left:1.6px;text-transform:lowercase}
.mark small{font-size:8px;letter-spacing:.2px;text-transform:lowercase}

/* Struktur des Untergrunds. Zwei Lagen, beide im Stylesheet erzeugt -- keine Bilddatei, kein
   fremder Server, damit die Sicherheitsregel scharf bleiben kann.
   1. eine feine Koernung (SVG-Rauschen als Daten-URL), sehr schwach,
   2. ein kaum sichtbarer Streifen, der dem Sand Richtung gibt. */
body{
  background-color:var(--bg);
  /* Zwei Ebenen mit unterschiedlichem Rapport: 1200 und 830 px teilen sich erst
     nach rund 100.000 px -- damit ist keine Kachelkante mehr auszumachen.
     Robert am 11.8.2026: "der Rapport ist viel zu klein, man kann die Kacheln
     auf Anhieb erkennen." */
  background-image:url("sand2.svg"),url("sand.svg");
  background-repeat:repeat,repeat;
  background-size:830px 830px,1200px 1200px;
  background-position:0 0,0 0;
}

/* Malediventuerkis, sparsam: als zweiter Akzent neben Rot und Sonne.
   Es sitzt dort, wo etwas weitergeht -- Verweise, Karten unter der Hand, der Schimmer im Kopf. */
.karte:hover{border-color:var(--tuerkis)}
.karte .mehr{color:var(--tuerkist)}
.cta.sun{background:var(--tuerkist);color:#fff}   /* 6,1:1 -- weiss darauf lesbar */
.cta.sun:hover{background:var(--tuerkisd)}
h2{border-left:3px solid var(--tuerkis);padding-left:9px}
.hero h1 em{color:var(--tuerkist)}
a:hover{text-decoration-color:var(--tuerkis)}
.zitatzeile{border-top-color:var(--line)}
.sun{background:radial-gradient(circle,rgba(15,157,157,.30),rgba(245,166,35,.16) 45%,transparent 70%)}
footer{border-top:1px solid var(--line)}

/* Kopfbild je Seite. Eckig wie alles andere, mit einer feinen Kante statt Schatten. */
.kopfbild{margin:0 0 30px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--duenschatten)}
.kopfbild img{display:block;width:100%;height:auto}
/* Bildunterschrift, seit 18.8.2026 -- gehoert zum Vordach oben und erklaert, was man sieht. */
.kopfbild figcaption{padding:10px 14px;font-size:.86rem;line-height:1.5;color:var(--soft);
border-top:1px solid var(--line);background:var(--white)}
.bildzeile{font-size:12.5px;color:var(--soft);padding:8px 10px;background:var(--white);
           border-top:1px solid var(--line)}

/* EBENEN -- Robert am 21.7.2026: "interaktiv mit ein oder zwei Ebenen unter der Oberflaeche".
   Oben steht die kurze Antwort, darunter liegt die lange. Wer nur ueberfliegt, wird nicht
   zugeschuettet; wer es genau wissen will, klickt einmal. Ohne JavaScript, reines HTML. */
details.ebene{border:1px solid var(--line);background:var(--white);margin:.9rem 0;
  box-shadow:0 14px 26px -8px rgba(90,64,38,.36),0 4px 9px rgba(90,64,38,.20)}
details.ebene>summary{cursor:pointer;padding:.7rem 1rem;font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:600;color:var(--tuerkist);list-style:none;user-select:none}
details.ebene>summary::-webkit-details-marker{display:none}
details.ebene>summary::before{content:"▸ ";color:var(--tuerkis)}
details.ebene[open]>summary::before{content:"▾ "}
details.ebene>summary:hover{background:rgba(31,188,196,.08)}
details.ebene .tief{padding:0 1rem 1rem;font-size:15.5px;border-top:1px solid var(--line);
  padding-top:.8rem}
details.ebene .tief p:first-child{margin-top:0}

/* Gruppenueberschriften auf der Dienstleistungsseite -- Robert 10.9.2026: drei Gruppen
   statt einer flachen Liste. */
h3.gruppe{font-family:"Space Grotesk";font-size:20px;margin:3.4rem 0 .3rem}
h3.gruppe:first-of-type{margin-top:1rem}

/* B2B ist die zweite Hauptsparte neben B2C -- Robert 10.9.2026: "muss so gross werden
   wie oben das B2C". Gleiche Groesse wie der Hero-h1, nicht wie die Zwischenueberschriften
   der einzelnen Gruppen. */
h3.gruppe.hero-gross{font-size:clamp(36px,6vw,64px);line-height:1.04;margin-top:4rem}
@media(max-width:640px){h3.gruppe.hero-gross{font-size:34px}}

/* Rechner in den "Kostenlos vorab"-Feldern -- Robert 10.9.2026. Laeuft im
   Browser, nichts wird abgeschickt. */
.rechner{background:var(--bg);border:1px solid var(--line);padding:16px 18px;margin-top:12px;
         box-shadow:0 14px 26px -8px rgba(90,64,38,.36),0 4px 9px rgba(90,64,38,.20)}
.rechner .zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 14px;margin-bottom:12px}
.rechner label{display:block;font-size:12.5px;color:var(--soft);margin-bottom:4px}
.rechner input,.rechner select{width:100%;font:inherit;font-size:15px;padding:8px 10px;
  border:1px solid var(--line);background:var(--white);border-radius:0}
.rechner input:focus,.rechner select:focus{outline:none;border-color:var(--tuerkis)}
.rechner button{font:inherit;font-weight:600;cursor:pointer;border:none;
  background:var(--tuerkist);color:#fff;padding:10px 20px;border-radius:0}
.rechner button:hover{background:var(--tuerkisd)}
.r-ergebnis{margin-top:12px;padding:12px 14px;background:var(--white);
  border-left:3px solid var(--tuerkis);font-size:15px}
.r-ergebnis b{font-family:"Space Grotesk";font-size:19px}
.checkliste{margin:0;padding-left:1.2em}
.checkliste li{margin:.4rem 0}
pre.code{background:var(--dark);color:#e8f0ec;padding:16px 18px;overflow-x:auto;
  font-size:13.5px;line-height:1.5}

/* Drei Bereiche nebeneinander -- Startseite ab 14.8.2026.
   Robert: "es sind eigentlich auch keine Projekte" -- aus sechs Einzelseiten wurden
   drei Bereiche, die selbst verzweigen. */
.projekte.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.projekte.drei{grid-template-columns:1fr}}

/* Vier Bereiche -- Dienstleistungen dazugekommen, 10.9.2026. */
.projekte.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.projekte.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.projekte.vier{grid-template-columns:1fr}}