/* Unterseiten (KI im Büro, Gründen mit KI, So arbeite ich, Kontakt).
   Ergänzt das Muster der Startseite (start3-… in style.css) um Skizze, Daten-Ampel und Etiketten.
   Nur Farben und Schriften aus style.css; Bilder sind Inline-SVG, keine Skripte (CSP). */

/* Skizze rechts im Kopf, an der Stelle des Fotos auf der Startseite */
.u-bild{background:var(--fein);border:1px solid var(--haar);border-radius:2px;padding:clamp(1rem,2.5vw,1.75rem);
  background-image:linear-gradient(var(--haar) 1px,transparent 1px),linear-gradient(90deg,var(--haar) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.u-bild svg{display:block;width:100%;height:auto}

/* Ein Satz unter dem Hauptknopf, der das Risiko nimmt */
main p.u-risiko{margin:.9rem 0 0;font-size:.92rem;color:var(--grau)}

/* Daten-Ampel */
.u-ampel{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.25rem}
.u-ampel>div{background:#fff;border:1.5px solid var(--navy);border-top-width:5px;padding:1.1rem 1.3rem 1.3rem}
.u-ampel .gruen{border-top-color:#2F6B45}.u-ampel .gelb{border-top-color:#B7811C}.u-ampel .rot{border-top-color:#9A3B2E}
.u-ampel .mono{display:flex;align-items:center;gap:.55rem;color:var(--navy);margin:0 0 .55rem}
.u-ampel .mono::before{content:"";width:.8rem;height:.8rem;border-radius:50%;flex:none}
.u-ampel .gruen .mono::before{background:#2F6B45}.u-ampel .gelb .mono::before{background:#B7811C}.u-ampel .rot .mono::before{background:#9A3B2E}
.u-ampel p{margin:0 0 .7rem;font-size:.97rem}
.u-ampel p.mono{font-size:.75rem;margin-bottom:.55rem}
.u-ampel q{display:block;font:italic 300 1.12rem/1.4 var(--serif);color:var(--navy)}
.u-ampel q::before{content:"„"}.u-ampel q::after{content:"“"}

/* Regeln: acht Kacheln, die letzte in Navy */
.u-regeln>div{min-height:9rem}
.start3-kacheln>div.dunkel{background:var(--navy);border-color:var(--navy);color:#DCE1EA}
.start3-kacheln>div.dunkel b{color:#fff}
.start3-kacheln>div.dunkel a{color:#fff}

/* Etiketten */
.u-etiketten{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1.1rem 0 0;padding:0}
main .u-etiketten li{margin:0;padding:.45rem .9rem;border:1.5px solid var(--navy);border-radius:2rem;font-size:.92rem;color:var(--navy);background:#fff;max-width:none}
main .u-etiketten li::before{content:none}

.u-weiter{margin-top:1rem}
main>section.start3-held.unter-held{align-items:center}

@media (max-width:60rem){
  .u-ampel{grid-template-columns:1fr}
}
@media (max-width:52rem){
  .u-bild{max-width:26rem}
  .u-regeln>div{min-height:0}
}

/* Links in Kacheln (Kontakt) nicht als eigene Kachel zeichnen */
.start3-kacheln>div a{display:inline;min-height:0;padding:0;border:0;color:var(--navy);text-decoration:underline;text-decoration-color:var(--messing)}
.start3-kacheln>div a:hover{background:none;text-decoration-thickness:2px}
.start3-kacheln a[href^="mailto:"]{overflow-wrap:anywhere}

/* Keine einzelnen Wörter in der letzten Zeile (Browser ohne Unterstützung ignorieren das) */
main h1,main h2,.hallo{text-wrap:balance}
main p,main li{text-wrap:pretty}