/* ==========================================================================
   männerbrust.at — Optik dieser Website.

   Nur Aussehen: Variablen überschreiben und eigene Regeln. Struktur steckt in
   den Sections, Inhalte in content/. Feste Farbwerte ausschließlich in :root —
   überall sonst über die Variablen, sonst kann das Panel später keine Farben
   anbieten.

   Haltung: ruhig, sachlich, warm. Das Thema ist schambesetzt; die Seite darf
   nicht werblich glänzen. Serifen in den Überschriften, viel Luft, gedeckte
   Erdtöne — nah an leogmelch.at, aber eigenständig.
   ========================================================================== */

:root {
  /* --- Farben --------------------------------------------------------- */
  --c-primaer:      #16333B;   /* tiefes Petrol: Überschriften, Footer     */
  --c-primaer-hell: #2E5A66;
  --c-akzent:       #B4653F;   /* Terracotta: Buttons, Marken             */
  --c-akzent-hell:  #CE8560;
  --c-text:         #232A2C;
  --c-text-leise:   #5E6B6F;
  --c-bg:           #FFFFFF;
  --c-bg-alt:       #F5F1EA;   /* warmes Papier                            */
  --c-linie:        #E3DDD3;
  --c-invers:       #FFFFFF;

  /* --- Typografie ----------------------------------------------------- */
  /* Hausstandard. Solange die Schriftdateien nicht in _shared/theme/ liegen,
     greift die Systemschrift — die Seite bleibt dabei vollständig lesbar. */
  --font-head: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-basis:  1.09rem;
  --fs-h1:     clamp(2.3rem, 6vw, 4rem);
  --fs-h2:     clamp(1.75rem, 3.6vw, 2.6rem);
  --fs-h3:     clamp(1.15rem, 2vw, 1.4rem);
  --lh-head:   1.14;
  --gewicht-head: 600;

  /* --- Maße ----------------------------------------------------------- */
  --maxwidth:      1160px;
  --maxwidth-text: 66ch;
  --radius:        4px;
  --radius-gross:  8px;
  --schatten:      0 10px 40px rgba(22, 51, 59, .09);

  /* --- Site-eigene Zusätze (Präfix --x-) ------------------------------ */
  --x-sand-tief:   #EBE4D8;
  --x-warn-bg:     #FBF2EA;
  --x-warn-linie:  #C98A5F;
  --x-gruen:       #3E6B5A;   /* zweite Sachfarbe: Pseudogynäkomastie     */
  --x-gruen-bg:    #EFF3F0;
  --x-kopf-hoehe:  4.5rem;
}

/* --- Grundton --------------------------------------------------------- */

body { background: var(--c-bg); }

h2 { letter-spacing: -.015em; }
h3 { letter-spacing: -.005em; }

.sec-inner > .sec-titel + .sec-lead { margin-top: -.4em; }

.sec-lead {
  max-width: var(--maxwidth-text);
  font-size: 1.13em;
  color: var(--c-text-leise);
  margin-bottom: 2.4em;
}

.sec-alt { background: var(--c-bg-alt); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-akzent);
  margin: 0 0 1.1em;
}

.btn { border-radius: var(--radius); font-weight: 600; letter-spacing: .01em; }
.btn-sekundaer:hover { background: var(--c-primaer); color: var(--c-invers); }

a { text-underline-offset: .18em; }

/* --- Kopfzeile -------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-linie);
}
.kopf-inner {
  max-width: var(--maxwidth);
  margin-inline: auto;
  min-height: var(--x-kopf-hoehe);
  padding: 0 var(--space);
  display: flex;
  align-items: center;
  gap: var(--space);
}
.kopf-marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.kopf-logo-bild { width: auto; height: 2rem; }
.kopf-wort {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-primaer);
  white-space: nowrap;
}
.kopf-nav { display: flex; align-items: center; gap: 1.5rem; }
.kopf-link {
  text-decoration: none;
  font-size: .95rem;
  color: var(--c-text);
  padding: .3em 0;
  border-bottom: 2px solid transparent;
}
.kopf-link:hover { border-bottom-color: var(--c-akzent); }
.kopf-cta { padding: .62em 1.25em; font-size: .93rem; }

/* Mobiles Menü ohne JavaScript: <details> trägt den Zustand selbst. */
.kopf-menue { display: none; }
.kopf-menue > summary {
  list-style: none;
  cursor: pointer;
  padding: .55rem;
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  line-height: 0;
}
.kopf-menue > summary::-webkit-details-marker { display: none; }
.kopf-menue > summary svg { width: 22px; height: 22px; stroke: var(--c-primaer); }

/* Auf schmalen Geräten konkurrieren Logo, Wortmarke und Menüknopf um denselben
   Platz. Das Logo wird kleiner, die Wortmarke darf schrumpfen — sie trägt den
   Namen der Seite und bleibt deshalb stehen. */
@media (max-width: 560px) {
  .kopf-inner { gap: .6rem; }
  .kopf-marke { gap: .5rem; min-width: 0; }
  .kopf-logo-bild { height: 1.5rem; flex: 0 0 auto; }
  .kopf-wort { font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 900px) {
  .kopf-nav { display: none; }
  .kopf-menue { display: block; }
  .kopf-menue[open] .kopf-klapp { display: flex; }
  .kopf-klapp {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-linie);
    box-shadow: var(--schatten);
    padding: var(--space);
  }
  .kopf-klapp .kopf-link { padding: .85em 0; border-bottom: 1px solid var(--c-linie); }
  .kopf-klapp .btn { margin-top: var(--space); text-align: center; }
}

/* --- Hero ------------------------------------------------------------- */

/* Der Kopfbereich trägt die Sandfläche vollflächig; das Bild sitzt bündig auf
   der Unterkante, damit die Fläche dort endet und nicht mitten im Text. */
.sec-hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 0;
  background: var(--c-bg-alt);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.hero-text { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero-text h1 { margin-bottom: .45em; }
.hero-text h1 em { font-style: italic; color: var(--c-akzent); }
.hero-subline {
  max-width: 46ch;
  font-size: 1.2em;
  color: var(--c-text-leise);
  margin-bottom: 2em;
}
.hero-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-bild { align-self: end; }
.hero-bild .bild-figur > img,
.hero-bild .bild-figur > picture,
.hero-bild .bild-platzhalter {
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}

.hero-fakten {
  border-top: 1px solid var(--c-linie);
  margin-top: 0;
}
.hero-fakten-inner {
  max-width: var(--maxwidth);
  margin-inline: auto;
  padding: 1.5rem var(--space);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem 2rem;
}
.fakt-wert { font-family: var(--font-head); font-weight: 600; color: var(--c-primaer); display: block; }
.fakt-label { font-size: var(--fs-klein); color: var(--c-text-leise); }

@media (max-width: 820px) {
  .sec-hero { background: var(--c-bg-alt); padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-text { padding-bottom: 2.5rem; }
  .hero-bild { max-width: 420px; }
}

/* --- Fließtextabschnitt ----------------------------------------------- */

.text-block { max-width: var(--maxwidth-text); }
.text-block p:first-of-type {
  font-size: 1.25em;
  line-height: 1.55;
  color: var(--c-primaer);
  font-family: var(--font-head);
}

/* --- Die Weiche: Drüse oder Fett -------------------------------------- */

.weiche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space);
  margin-bottom: var(--space);
}
.weiche-karte {
  background: var(--c-bg);
  border: 1px solid var(--c-linie);
  border-top: 3px solid var(--c-akzent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
}
.weiche-karte--pseudo { border-top-color: var(--x-gruen); }
.weiche-karte h3 { margin-bottom: .5em; }
.weiche-karte--pseudo h3 { color: var(--x-gruen); }
.weiche-folge {
  margin-top: auto;
  padding-top: 1.1em;
  border-top: 1px solid var(--c-linie);
  font-weight: 600;
  color: var(--c-primaer);
}
.weiche-mehr {
  display: inline-block;
  margin-top: 1em;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-akzent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.weiche-karte--pseudo .weiche-mehr { color: var(--x-gruen); }

.weiche-misch {
  background: var(--x-sand-tief);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: var(--space);
}
.weiche-misch h3 { margin-bottom: .4em; }
.weiche-misch p { max-width: var(--maxwidth-text); margin-bottom: 0; }

.weiche-bild { margin-block: calc(var(--space) * 2); }

.tastprobe {
  border-left: 3px solid var(--c-akzent);
  padding: .2em 0 .2em 1.4em;
  max-width: var(--maxwidth-text);
}
.tastprobe h3 { font-size: 1.05rem; margin-bottom: .35em; }
.tastprobe p { margin-bottom: 0; color: var(--c-text-leise); }

/* --- Karten-Raster (Ursachen) ----------------------------------------- */

/* Drei Spalten statt vier: Bei fünf Ursachen stünde sonst eine Karte allein
   in der zweiten Reihe. 3 + 2 liest sich ruhiger. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: var(--space);
}
.karte {
  background: var(--c-bg);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.sec-alt .karte { background: var(--c-bg); }
.karte h3 { font-size: 1.1rem; margin-bottom: .45em; }
.karte p { margin-bottom: 0; color: var(--c-text-leise); }

/* --- Schritte (Diagnostik) -------------------------------------------- */

.schritte { display: grid; gap: 0; max-width: 62rem; }
.schritt {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--c-linie);
}
.schritt:last-child { border-bottom: 1px solid var(--c-linie); }
.schritt-nr {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-akzent);
  line-height: 1;
  padding-top: .1em;
}
.schritt h3 { font-size: 1.15rem; margin-bottom: .35em; }
.schritt p { margin-bottom: 0; color: var(--c-text-leise); }

/* --- Warnhinweis ------------------------------------------------------ */

.warnblock {
  margin-top: calc(var(--space) * 2.5);
  background: var(--x-warn-bg);
  border: 1px solid var(--x-warn-linie);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 62rem;
}
.warnblock h3 { color: var(--c-akzent); margin-bottom: .4em; }
.warnblock ul { margin: 1em 0; padding-left: 1.2em; }
.warnblock li { margin-bottom: .45em; }
.warnblock p:last-child { margin-bottom: 0; }

/* --- Schweregrade ----------------------------------------------------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space);
}
.grad {
  background: var(--c-bg);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: 1.6rem;
  position: relative;
}
.grad-stufe {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-invers);
  background: var(--c-primaer);
  padding: .3em .7em;
  border-radius: 2px;
  margin-bottom: 1em;
}
.grad h3 { font-size: 1.05rem; margin-bottom: .4em; }
.grad p { font-size: .97rem; color: var(--c-text-leise); margin-bottom: 0; }

/* --- Operation: Bausteine und Eckdaten -------------------------------- */

.bausteine { display: grid; gap: calc(var(--space) * 1.6); max-width: 62rem; }
.baustein {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  align-items: start;
}
.baustein-marke {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--c-akzent);
  color: var(--c-invers);
  font-family: var(--font-head);
  font-weight: 600;
  display: grid;
  place-items: center;
}
.baustein h3 { margin-bottom: .3em; }
.baustein p { margin-bottom: 0; }

.op-bild { margin-block: calc(var(--space) * 2.5); }

/* Ebenfalls drei Spalten — fünf Eckdaten ergeben so 3 + 2 statt 4 + 1. */
.eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0 calc(var(--space) * 2);
  border-top: 1px solid var(--c-linie);
}
.eckdatum { padding: 1.5rem 0; border-bottom: 1px solid var(--c-linie); }
.eckdatum-label {
  font-size: var(--fs-klein);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-leise);
  margin-bottom: .3em;
}
.eckdatum-wert {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-primaer);
  margin-bottom: .5em;
}
.eckdatum p { font-size: .96rem; color: var(--c-text-leise); margin-bottom: 0; }

/* --- Zeitleiste (Ablauf) ---------------------------------------------- */

.zeitleiste { position: relative; max-width: 62rem; padding-left: 2.4rem; }
.zeitleiste::before {
  content: "";
  position: absolute;
  left: .55rem; top: .6rem; bottom: .6rem;
  width: 2px;
  background: var(--c-linie);
}
.zeitpunkt { position: relative; padding-bottom: 2.2rem; }
.zeitpunkt:last-child { padding-bottom: 0; }
.zeitpunkt::before {
  content: "";
  position: absolute;
  left: -2.4rem; top: .5rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-akzent);
}
.sec-alt .zeitpunkt::before { background: var(--c-bg-alt); }
.zeitpunkt h3 { font-size: 1.12rem; margin-bottom: .3em; }
.zeitpunkt p { margin-bottom: 0; color: var(--c-text-leise); }

/* --- Nachsorge -------------------------------------------------------- */

.nachsorge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space);
}
.nachsorge-karte {
  background: var(--c-bg);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.nachsorge-wert {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-akzent);
  display: block;
  margin-bottom: .1em;
}
.nachsorge-karte h3 { font-size: 1rem; margin-bottom: .6em; }
.nachsorge-karte p { font-size: .96rem; color: var(--c-text-leise); margin-bottom: 0; }

/* --- Risiken ---------------------------------------------------------- */

.risiken-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 calc(var(--space) * 2.5);
  max-width: 62rem;
}
.risiko { padding: 1.3rem 0; border-bottom: 1px solid var(--c-linie); }
.risiko h3 { font-size: 1.02rem; margin-bottom: .25em; }
.risiko p { font-size: .96rem; color: var(--c-text-leise); margin-bottom: 0; }
.risiken-schluss {
  max-width: var(--maxwidth-text);
  margin-top: calc(var(--space) * 2);
  font-size: 1.1em;
  color: var(--c-primaer);
  font-family: var(--font-head);
}

/* --- Kosten ----------------------------------------------------------- */

.kosten-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.kosten-grid .sec-preise { padding: 0; }
.kosten-grid .sec-preise .sec-inner { max-width: none; padding: 0; }
.kosten-grid .preis-tabelle { max-width: none; }
.kosten-hinweis { font-size: .96rem; color: var(--c-text-leise); }

.kasse {
  background: var(--c-primaer);
  color: var(--c-invers);
  border-radius: var(--radius);
  padding: clamp(1.7rem, 3.4vw, 2.4rem);
}
.kasse h3 { color: var(--c-invers); margin-bottom: .5em; }
.kasse p { color: color-mix(in srgb, var(--c-invers) 82%, transparent); }
.kasse p:last-child { margin-bottom: 0; }
.kasse strong { color: var(--c-invers); }

@media (max-width: 860px) { .kosten-grid { grid-template-columns: 1fr; } }

/* --- Über mich -------------------------------------------------------- */

.ueber-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ueber-bild .bild-figur > img,
.ueber-bild .bild-figur > picture,
.ueber-bild .bild-platzhalter { border-radius: var(--radius-gross); }
@media (max-width: 820px) { .ueber-grid { grid-template-columns: 1fr; } }

/* --- Quellen ---------------------------------------------------------- */

.sec-quellen { padding-block: calc(var(--sec-abstand) * .6); }
.quellen-liste {
  list-style: none;
  counter-reset: quelle;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: calc(var(--space) * 3);
  font-size: .92rem;
}
.quellen-liste li {
  counter-increment: quelle;
  break-inside: avoid;
  margin-bottom: .85em;
  padding-left: 2.1em;
  position: relative;
  color: var(--c-text-leise);
}
.quellen-liste li::before {
  content: counter(quelle) ".";
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  color: var(--c-akzent);
  font-weight: 600;
}
.quellen-liste a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-linie); }
.quellen-liste a:hover { border-bottom-color: var(--c-akzent); color: var(--c-text); }
@media (max-width: 780px) { .quellen-liste { columns: 1; } }

/* --- Unterseiten ------------------------------------------------------ */

.seite-kopf { background: var(--c-bg-alt); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seite-kopf h1 { margin-bottom: .35em; }
.seite-kopf h1 em { font-style: italic; color: var(--c-akzent); }
.seite-kopf .sec-lead { margin-bottom: 0; }
.krumen { font-size: .88rem; color: var(--c-text-leise); margin-bottom: 1.6em; }
.krumen a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-linie); }
.krumen a:hover { border-bottom-color: var(--c-akzent); }

.seite-block { max-width: var(--maxwidth-text); margin-bottom: calc(var(--space) * 2.6); }
.seite-block:last-child { margin-bottom: 0; }
.seite-block h2 { margin-bottom: .5em; }

.merksatz {
  background: var(--x-sand-tief);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  font-family: var(--font-head);
  font-size: 1.12rem;
  color: var(--c-primaer);
  margin-bottom: calc(var(--space) * 2.6);
  max-width: var(--maxwidth-text);
}

.seite-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: calc(var(--space) * 2);
}

/* --- Terminbuchung ---------------------------------------------------- */

.termin-iframe { min-height: 780px; background: var(--c-bg-alt); }
.termin-hinweis { font-size: var(--fs-klein); color: var(--c-text-leise); margin-top: 1em; }

/* --- Footer und Autorenbox ------------------------------------------- */

.footer { padding-block: calc(var(--space) * 3.5); }
.footer-standort { font-weight: 600; }
.autorenbox { background: var(--c-bg-alt); border-top: 0; }

/* --- Sprungmarke für Tastaturbedienung -------------------------------- */

.sprunglink {
  position: absolute;
  left: -9999px;
  background: var(--c-primaer);
  color: var(--c-invers);
  padding: .8em 1.2em;
  z-index: 100;
}
.sprunglink:focus { left: 0; top: 0; }

/* --- Patientenstimmen -------------------------------------------------- */
/* Greift die Kartenform der Seite auf (.karte): weißer Grund, feine Linie,
   kleiner Radius. Die Zitate stehen bewusst ohne Anführungszeichen-Ornament —
   der Text trägt sich selbst. */

.sec-bewertungen { background: var(--c-bg-alt); }
.bewertungen-liste { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: var(--space); }
.bewertung {
  background: var(--c-bg);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.bewertung-sterne { font-size: 1.05rem; }
.bewertung-text p { color: var(--c-text); }
.bewertung-quelle { padding-top: 1rem; border-top: 1px solid var(--c-linie); }
.bewertungen-quelle-link a { color: var(--c-primaer); }