/* ============================================================================
   konfliktcoach.at — Stylesheet
   Keine Google Fonts, keine Cookies, keine Fremdabrufe.
   Farben und Raster übernommen aus dem bisherigen Helix3-Template.
   ============================================================================ */

:root {
  --akzent: #ef6d00;
  --blau: #3c5aa0;          /* Blau aus dem Logo */
  --text: #1c1c1c;
  --text-hell: #5a5a5a;
  --grau: #666666;          /* Fließtext — dunkel genug für den Kontrast auf Blaugrau */
  --bg: #ffffff;
  --linie: #e2e2e2;
  --breite: 1140px;
  --kopf-hoehe: 84px;

  /* Verdana — dieselbe Schrift wie auf biancaortner.at.
     Systemschrift, auf allen gängigen Geräten vorhanden.
     KEIN Abruf von Google Fonts, kein externer Request, kein Cookie. */
  --schrift: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Bricht ein Wort nur dann um, wenn es sonst ueber den Rand ragen wuerde
     (lange Fachbegriffe, lange Web-Adressen). Sonst keine Wirkung. */
  overflow-wrap: break-word;
}

.container { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }

/* overflow-wrap greift NUR, wenn ein einzelnes Wort sonst nicht in die Zeile
   passt (z. B. "Zivilrechtsmediationsgesetz" auf sehr schmalen Geraeten ab
   etwa 320 Pixel). Auf allen uebrigen Geraeten aendert sich nichts. */
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; color: #111; overflow-wrap: break-word; }
h1 { font-size: 2.35rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--akzent); text-decoration: none; }
a:hover, a:focus { color: var(--blau); text-decoration: underline; }
img, picture { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- Top-Leiste */
.topbar {
  background: #dfe5ec;
  border-bottom: 1px solid var(--linie);
  font-size: .88rem;
  color: var(--text-hell);
}
.topbar .container { display: flex; flex-wrap: wrap; gap: 8px 22px;
                     align-items: center; justify-content: space-between;
                     min-height: 40px; }
.topbar a { color: var(--text-hell); }
.topbar a:hover { color: var(--blau); }
.topbar__links { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.topbar__links a { display: inline-flex; align-items: center; gap: 7px; }
.topbar__links svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.topbar__social { display: flex; gap: 15px; align-items: center; }
.topbar__social a { display: flex; line-height: 0; }
.topbar__social svg { width: 19px; height: 19px; fill: #6b7681; transition: fill .2s; }
.topbar__social a:hover svg, .topbar__social a:focus svg { fill: var(--blau); }

/* ---------------------------------------------------------------- Kopfbereich */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(140%) blur(6px);
}
.kopf .container { display: flex; align-items: center; justify-content: space-between;
                   min-height: var(--kopf-hoehe); gap: 20px; }
.logo img { width: 250px; max-width: 60vw; }

/* Menü — der Schalter ist auf Handy/Tablet unsichtbar, aber mit der
   Tabulatortaste erreichbar. Nur so lässt sich das Menü ohne Maus öffnen. */
.menu-schalter { display: none; }
.menu-knopf {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; font: inherit; color: var(--text);
}
.menu-knopf span, .menu-knopf span::before, .menu-knopf span::after {
  display: block; width: 26px; height: 2px; background: var(--text); content: ""; position: relative;
}
.menu-knopf span::before { position: absolute; top: -8px; }
.menu-knopf span::after  { position: absolute; top:  8px; }

.nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav a {
  color: #ef8a3c; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent; display: block;
}
.nav a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent); }
.nav a:hover, .nav a:focus { color: var(--blau); border-bottom-color: var(--blau); text-decoration: none; }
.nav li { position: relative; }
.nav ul ul {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  flex-direction: column; gap: 0; background: #fff;
  border: 1px solid var(--linie); box-shadow: 0 8px 24px rgba(0,0,0,.09); padding: 6px 0;
}
.nav li:hover > ul, .nav li:focus-within > ul { display: flex; }
.nav ul ul a { padding: 8px 18px; border: 0; }

/* ---------------------------------------------------------------- Karussell */
.buehne { position: relative; overflow: hidden; height: clamp(340px, 64vh, 620px); background: #d8d8d8; }
.buehne__bilder { position: absolute; inset: 0; }
.buehne__bild {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: ueberblenden 16s infinite;
}
/* Echte Bilder statt Hintergrundbilder: nur so haben sie einen
   Alternativtext, tauchen in der Google-Bildersuche auf und können
   nachgeladen werden. */
.buehne__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; box-shadow: none;
}
.buehne__text { position: relative; z-index: 1; }
.buehne__bild:nth-child(1) { animation-delay:  0s; }
.buehne__bild:nth-child(2) { animation-delay:  4s; }
.buehne__bild:nth-child(3) { animation-delay:  8s; }
.buehne__bild:nth-child(4) { animation-delay: 12s; }

@keyframes ueberblenden {
  0%  { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; }
}

/* Beschriftung je Bild — Farbe und Ausrichtung wie im Original */
.buehne__text {
  text-align: center; width: 100%; height: 100%; padding: 0 8%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  /* weicher dunkler Hauch nur um den Text — das Bild bleibt hell.
     Der Verlauf reicht über den Textkasten hinaus, damit keine Kante entsteht. */
  background: radial-gradient(ellipse 74% 54% at 50% 50%,
              rgba(0,0,0,.44) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.09) 74%, rgba(0,0,0,0) 100%);
}
.buehne__text h1, .buehne__text .buehne__gross {
  font-weight: 400; text-transform: uppercase; letter-spacing: .045em;
  font-size: clamp(1.45rem, 4.7vw, 5.2rem); line-height: 1.12; margin: 0 0 .28em;
  /* Keine Silbentrennung im Karussell. Sicherheitsnetz für sehr schmale
     Geräte: lange Wörter dürfen notfalls umbrechen, statt über den Rand
     zu laufen. */
  hyphens: none; overflow-wrap: break-word;
}
.buehne__gross { margin: 0 0 .3em; }
.buehne__text p:not(.buehne__gross) {
  font-size: clamp(1rem, 1.9vw, 1.8rem); letter-spacing: .02em; margin: 0; font-weight: 300;
}
.buehne__text--gold  h1, .buehne__text--gold  .buehne__gross { color: #f0b849;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 20px rgba(0,0,0,.55); }
.buehne__text--gold  p  { color: #f0b849; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.buehne__text--weiss .buehne__gross { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.buehne__text--weiss p  { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.buehne__text--rechts {
  text-align: right; padding-right: 10%;
  background: radial-gradient(ellipse 64% 52% at 68% 50%,
              rgba(0,0,0,.44) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.07) 76%, rgba(0,0,0,0) 100%);
}

/* --- Blättern von Hand: Auswahlschalter, Pfeile, Punkte ------------------- */
.buehne__wahl { position: absolute; width: 1px; height: 1px; margin: -1px;
                padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

#s1:checked ~ .buehne__bilder .buehne__bild,
#s2:checked ~ .buehne__bilder .buehne__bild,
#s3:checked ~ .buehne__bilder .buehne__bild,
#s4:checked ~ .buehne__bilder .buehne__bild {
  animation: none; opacity: 0; transition: opacity .7s ease;
}
#s1:checked ~ .buehne__bilder .buehne__bild:nth-child(1),
#s2:checked ~ .buehne__bilder .buehne__bild:nth-child(2),
#s3:checked ~ .buehne__bilder .buehne__bild:nth-child(3),
#s4:checked ~ .buehne__bilder .buehne__bild:nth-child(4) { opacity: 1; }

/* Pfeile — schlichte graue Flächen wie im Original, erst beim Überfahren deutlich */
.buehne__pfeile { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pfeil {
  display: none; pointer-events: auto; cursor: pointer;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 52px; background: rgba(120,120,120,.42);
  align-items: center; justify-content: center; transition: background .2s;
}
.buehne:hover .pfeil { background: rgba(100,100,100,.62); }
.pfeil:hover { background: rgba(60,60,60,.82); }
.pfeil span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pfeil::before { content: ""; width: 12px; height: 12px;
                 border-top: 2px solid #fff; border-right: 2px solid #fff; }
.pfeil--zurueck { left: 0; }
.pfeil--zurueck::before { transform: rotate(-135deg); margin-left: 4px; }
.pfeil--vor     { right: 0; }
.pfeil--vor::before     { transform: rotate(45deg);  margin-right: 4px; }

.buehne__pfeile .g1 { display: flex; }
#s2:checked ~ .buehne__pfeile .g1,
#s3:checked ~ .buehne__pfeile .g1,
#s4:checked ~ .buehne__pfeile .g1 { display: none; }
#s2:checked ~ .buehne__pfeile .g2,
#s3:checked ~ .buehne__pfeile .g3,
#s4:checked ~ .buehne__pfeile .g4 { display: flex; }

/* Punkte — aktiver Punkt in Magenta wie im Original.
   Der Punkt bleibt optisch 10 px klein, die antippbare Fläche ist aber
   24 x 24 px groß. Kleinere Flächen sind am Handy kaum zu treffen. */
.buehne__punkte { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4;
                  display: flex; gap: 4px; justify-content: center; }
.buehne__punkte label {
  width: 24px; height: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.buehne__punkte label::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 3px rgba(0,0,0,.35); transition: background .2s, transform .2s;
}
.buehne__punkte label:hover::before { background: rgba(255,255,255,.7); transform: scale(1.15); }
.buehne__punkte label span { position: absolute; width: 1px; height: 1px;
                             overflow: hidden; clip-path: inset(50%); }
#s1:checked ~ .buehne__punkte label:nth-child(1)::before,
#s2:checked ~ .buehne__punkte label:nth-child(2)::before,
#s3:checked ~ .buehne__punkte label:nth-child(3)::before,
#s4:checked ~ .buehne__punkte label:nth-child(4)::before { background: #e6007e; border-color: #e6007e; }

.buehne__wahl:focus-visible ~ .buehne__pfeile .pfeil,
.buehne__wahl:focus-visible ~ .buehne__punkte label { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .buehne__bild { animation: none; opacity: 0; transition: opacity .3s; }
  .buehne__bild:first-child { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Abschnitte */
.band { background: #dfe5ec; text-align: center; padding: 22px 0; }
.band h2 { font-size: clamp(1.15rem, 2.4vw, 1.75rem); font-weight: 700; color: #2b2b2b; margin: 0; }
.band__zusatz { color: #e8412a; font-size: clamp(1.05rem, 2.1vw, 1.55rem);
                font-weight: 700; margin: .15em 0 0; }

.abschnitt { padding: 56px 0 64px; background: #fff; }
.abschnitt--blau { background: #dfe5ec; }

.ueberschrift {
  text-align: center; font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 700;
  color: #2b2b2b; margin: 0 0 44px;
}

/* Zwei Spalten, abwechselnd Text/Bild */
.reihe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px;
  align-items: center; margin: 0 0 62px;
}
.reihe:last-child { margin-bottom: 0; }
.reihe--gedreht .reihe__text { order: 2; }
.reihe--gedreht .bildkarte   { order: 1; }

/* min-width: 0 erlaubt der Rasterspalte, schmaler zu werden als ihr
   laengstes Wort. Ohne diese Zeile sperrt sich das Raster und der Text
   ragt auf sehr schmalen Geraeten (ab etwa 280 Pixel) ueber den Rand. */
.reihe__text { min-width: 0; }
.reihe--voll { grid-template-columns: 1fr; }
.reihe--voll .reihe__text { max-width: 860px; }
/* Zwischenüberschrift in einer Textspalte — einheitlich auf allen Seiten,
   Vorbild ist "Beziehung, Familie & Nachbarschaft" auf der Startseite. */
.reihe__text h2, .reihe__text h3 { font-size: 1.05rem; font-weight: 700;
                  color: #2b2b2b; margin: 1.4em 0 .6em; }
.reihe__text > h2:first-child, .reihe__text > h3:first-child { margin-top: 0; }
/* Nur die langen Textseiten (Impressum, Datenschutz, ZivMediatG) brauchen
   darüber noch eine größere Gliederungsebene. */
.reihe--voll .reihe__text h2 { font-size: clamp(1.15rem, 2.1vw, 1.6rem);
                  font-weight: 400; color: #3a3a3a; }
/* Impressum und Datenschutz haben nur eine Gliederungsebene — dort gilt
   wieder der einheitliche Stil der übrigen Seiten. */
.reihe--voll .reihe__text--eben h2 { font-size: 1.05rem; font-weight: 700; color: #2b2b2b; }
.reihe__text p, .reihe__text li { color: var(--grau); font-size: .88rem; line-height: 1.75; }
.reihe__text ul { padding-left: 1.15em; margin: 0 0 1.3em; }
.reihe__text li { margin: .15em 0; }
.reihe__text--links { text-align: left; }
.symbol { margin: 0 0 24px; width: 180px; height: auto; display: block; }
.hervor { color: var(--akzent) !important; }
.eng { margin-bottom: 1.2em; }

/* Bild in weißer Karte mit Schatten, wie im Original */
.bildkarte { margin: 0; background: #fff; padding: 0; box-shadow: 0 10px 26px rgba(0,0,0,.13); }
main img, .karte { box-shadow: 0 10px 26px rgba(0,0,0,.13); }
.buehne img, .kopf img { box-shadow: none; }
.symbol { box-shadow: none !important; }
.bildkarte img { width: 100%; height: auto; display: block; }
.bildkarte--hoch img { max-height: 620px; object-fit: cover; }

/* Partnerliste auf der Seite „Links" */
.partner { list-style: none; margin: 0 auto 34px; padding: 0; max-width: 640px; }
.partner li { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
              padding: 14px 0; border-bottom: 1px solid var(--linie); }
.partner span { color: var(--grau); font-size: .88rem; }
.mitte { text-align: center; }
.partnerlogo { width: 200px; margin: 0 auto; box-shadow: none !important; }

.knopf {
  display: inline-block; background: var(--akzent); color: #fff; padding: 9px 20px;
  border-radius: 3px; font-size: .82rem; letter-spacing: .02em; transition: background .2s;
}
.knopf:hover, .knopf:focus { background: var(--blau); color: #fff; text-decoration: none; }

/* Kontakt */
/* Karte: schlichtes OpenStreetMap-Fenster mit der Markierung von
   OpenStreetMap selbst. Verschiebbar und zoombar. */
.karte { width: 100%; height: 380px; border: 0; display: block; margin: 0 0 46px; border-radius: 3px; }
@media (max-width: 600px) { .karte { height: 280px; margin-bottom: 34px; } }
.kontakt-raster { display: grid; grid-template-columns: 1fr; gap: 30px; }
/* Nur eine oder drei Spalten - nie zwei.
   Der frueher verwendete Automatikwert (auto-fit, minmax 240px) ergab bei
   rund 600-800 Pixel Breite zwei Spalten; der dritte Eintrag rutschte dann
   in eine zweite Zeile und daneben blieb eine Luecke. Betroffen waren das
   iPhone im Querformat (rund 745 Pixel) und das iPad im Hochformat (768). */
@media (min-width: 700px) {
  .kontakt-raster { grid-template-columns: repeat(3, 1fr); }
}
/* Handy im Hochformat: andere Reihenfolge - 1) Adresse 2) Telefon 3) E-Mail.
   Im Quelltext stehen die Felder weiterhin Telefon / Adresse / E-Mail; hier
   wird nur die Anzeige umgestellt. Ab 700 Pixel (Querformat, Tablet, Notebook)
   gilt wieder die urspruengliche Reihenfolge. */
@media (max-width: 699px) and (orientation: portrait) {
  .kontakt-feld:nth-child(1) { order: 2; }  /* Telefon  */
  .kontakt-feld:nth-child(2) { order: 1; }  /* Adresse  */
  .kontakt-feld:nth-child(3) { order: 3; }  /* E-Mail   */
}
.kontakt-feld { text-align: center; }
.kontakt-feld__verweis {
  display: block; color: var(--akzent); font-size: .9rem;
  text-decoration: none; transition: color .2s;
}
.kontakt-feld__symbol {
  width: 54px; height: 54px; fill: var(--akzent); margin: 0 auto 14px;
  display: block; transition: fill .2s, transform .2s;
}
.kontakt-feld__verweis:hover, .kontakt-feld__verweis:focus { color: var(--blau); text-decoration: none; }
.kontakt-feld__verweis:hover .kontakt-feld__symbol,
.kontakt-feld__verweis:focus .kontakt-feld__symbol { fill: var(--blau); transform: translateY(-3px); }
.kontakt-feld__verweis:hover span { text-decoration: underline; }
.anschrift { display: block; line-height: 1.8; }

/* ---------------------------------------------------------------- Fußbereich */
.fuss { background: #dfe5ec; color: var(--grau); padding: 30px 0 34px; font-size: .82rem; text-align: center; }
.fuss a { color: var(--akzent); }
.fuss a:hover { color: var(--blau); }

.fuss__links { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; margin: 0 0 24px; }
.fuss__rechte { color: var(--grau); text-align: center; margin: 0; }

/* Fehlerseite 404 */
.fehlerseite { max-width: 640px; text-align: center; }
.fehlerseite h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.fehlerseite p { margin: 0 0 26px; }
.fehlerseite__wege { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
                     margin-top: 34px; font-size: .9rem; }

/* Sprungmarke für Tastaturnutzer — unsichtbar, bis sie den Fokus bekommt.
   Über clip-path statt "weit nach links" gelegt, damit sie die Seite
   nirgends unbeabsichtigt verbreitert. */
.skip {
  position: absolute; left: 0; top: 0; background: var(--akzent); color: #fff;
  padding: 10px 18px; z-index: 999; clip-path: inset(50%);
}
.skip:focus { clip-path: none; }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 900px) {
  .menu-knopf { display: block; }
  /* Schalter unsichtbar, aber mit der Tabulatortaste erreichbar */
  .menu-schalter {
    display: block; position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
  }
  .menu-schalter:focus-visible ~ .menu-knopf { outline: 2px solid var(--blau); outline-offset: 2px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--linie); box-shadow: 0 10px 26px rgba(0,0,0,.10);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .menu-schalter:checked ~ .nav { max-height: 80vh; overflow-y: auto; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px 20px 18px; }
  .nav ul ul { position: static; display: flex; border: 0; box-shadow: none; padding-left: 16px; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--linie); }
  .logo img { width: 190px; }
  .bildkarte--hoch img { max-height: 420px; }
  .abschnitt { padding: 40px 0 46px; }
  .reihe { grid-template-columns: 1fr; gap: 26px; margin-bottom: 44px; }
  .reihe--gedreht .reihe__text { order: 1; }
  .reihe--gedreht .bildkarte   { order: 2; }
  h1 { font-size: 2rem; } h2 { font-size: 1.6rem; }
  .kontakt-raster { gap: 26px; }
  .fuss__links { gap: 18px 24px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .topbar { font-size: .8rem; }
  .topbar__links { gap: 14px; }
  .logo img { width: 165px; }
}

/* -------------------------------------------------- Handy im Querformat
   Ein quer gehaltenes Handy ist nur rund 375–430 px hoch. Kopfleiste und
   Karussell würden dort den ganzen Bildschirm füllen, ohne dass man sieht,
   dass darunter noch etwas kommt. Deshalb hier alles flacher. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --kopf-hoehe: 54px; }
  .topbar { font-size: .78rem; }
  .topbar .container { min-height: 30px; }
  .kopf .container { min-height: 54px; }
  .logo img { width: 155px; }
  .buehne { height: 68vh; }
  .buehne__text { padding: 0 6%; }
  .buehne__text h1, .buehne__text .buehne__gross { font-size: clamp(1.15rem, 3.2vw, 2rem); }
  .buehne__text p:not(.buehne__gross) { font-size: clamp(.8rem, 1.4vw, 1rem); }
  .buehne__punkte { bottom: 8px; }
  .pfeil { width: 38px; height: 44px; }
  .menu-schalter:checked ~ .nav { max-height: 68vh; }
  .abschnitt { padding: 32px 0 36px; }
  .ueberschrift { margin-bottom: 30px; }
  .karte { height: 300px; }
}