/* Seitengruppe "orte" der neuen Website (19.10.2026): Zielgruppen, Tools, Hannover. Ergaenzt neu.css nur um das,
   was dort fehlt. Farben aus den Variablen von neu.css; Ruhezustand = sichtbar. */

/* Steckbrief einer Zielgruppe: Bezeichnung und Wert in zwei Spalten */
.o-steckbrief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 10px 30px; }
.o-steckbrief > div { padding: 20px 0; border-bottom: 1px solid var(--rand); }
.o-steckbrief > div:nth-last-child(-n + 2) { border-bottom: 0; }
.o-steckbrief > div:nth-child(odd) { padding-right: 24px; }
.o-steckbrief dt { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.o-steckbrief dd { margin: 6px 0 0; font-size: 17px; font-weight: 500; }

/* Herausforderung, Idee, Wirkung: die Wirkung traegt die Markenfarbe am Rand */
.o-wirkung { border-color: var(--rand-stark); }
.o-wirkung p { color: var(--text); }

/* Kleine Hinweise (Quelle der Zahlen, Herkunft) */
.o-hinweis { margin: 22px 0 0; font-size: 14px; color: var(--leise); max-width: 70ch; }

/* Zwei Absaetze nebeneinander im Fliesstext */
.o-text p { margin: 0 0 18px; color: var(--leise); font-size: 18px; line-height: 1.7; }
.o-text p:last-child { margin-bottom: 0; }

/* Werkzeug-Karten */
.o-werkzeug { min-height: 100%; }
.o-werkzeug-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.o-preis { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(120, 220, 140, .45); background: rgba(60, 160, 90, .16); color: #b9efc9; font-size: 13px; font-weight: 600; }
.o-merkmale { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.o-merkmale li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rand); font-size: 13px; color: var(--text); }
.o-werkzeug .knopf { align-self: flex-start; margin-top: auto; }

/* Linkzeile mit mehreren Zielen (Leistungen, Wiki) */
.o-ziele { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 780px) {
  .o-steckbrief { grid-template-columns: 1fr; padding: 6px 22px; }
  .o-steckbrief > div:nth-child(odd) { padding-right: 0; }
  .o-steckbrief > div:nth-last-child(2) { border-bottom: 1px solid var(--rand); }
}

/* Kartentitel als h2 (Karten stehen direkt unter dem h1): wie .karte h3, ohne die grosse h2-Regel */
.karte .o-kartentitel { margin: 0; max-width: none; font: 600 clamp(24px, 2.2vw, 30px)/1.1 Clash, sans-serif; letter-spacing: -.01em; }
.karte .o-klein { font-size: 15px; }
/* Kleine Zeile als Ueberschrift einer Karte (h3.zeile): Schrift der Zeile statt der Kartenueberschrift */
.karte h3.zeile { font: 600 13px/1.2 DM, sans-serif; letter-spacing: .18em; }
/* Vorteile von Folio als Glasflaeche */
.o-vorteile { margin: 0; padding: 30px 34px; gap: 14px; }
/* Verweis unten in einer Karte (Quelle im Wiki) */
.o-unten { margin-top: auto; align-self: flex-start; }
/* Leistung hinter einer Ortsseite als grosse Glasflaeche */
.o-leistung { text-decoration: none; align-items: center; transition: border-color .4s; }
.o-leistung:hover { border-color: var(--rand-stark); }