/* 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:#f4efec;--white:#fffdfc;
      --sun:#f5a623;--sund:#c97b09;--red:#d6371f;--dark:#141a17;--green:#1f8f63;
      --tuerkis:#1fbcc4;--tuerkisd:#0b8b93;--tuerkist:#076f77}
*{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}
.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)}
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}
.karte:hover{border-color:var(--sun);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.06)}
.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 */
.liste div{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap}
.liste b{font-family:"Space Grotesk";min-width:15ch}
.liste span{color:var(--soft);font-size:14.5px;flex:1}

/* Dunkler Block */
.block{background:var(--dark);color:#eef3f0;border-radius:0;padding:32px}
.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-top:18px;max-width:70ch}

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;
  border-bottom:1px solid var(--line)}
@media(max-width:640px){.wrap:first-of-type{position:static;border-bottom:none}}

/* 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}
.kopfbild img{display:block;width:100%;height:auto}
.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}
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}

/* 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}}