/* =========================================================================
   0036.immo
   =========================================================================

   Farben der Marke:
     Pinie   #1C5B4A   die Ziffern, Knöpfe, dunkle Flächen
     Tinte   #15201C   Fliesstext und „immo“
     Paprika #C1452B   NUR der Punkt zwischen 0036 und immo
     Papier  #F7F5F0   der Grund

   Schriften:
     Poppins  für den Schriftzug und die Zahlen – runde Ziffern, runde 3
     Outfit   für alles andere
   ========================================================================= */

:root {
    --pinie:   #1C5B4A;
    --pinie-d: #123C31;
    --tinte:   #15201C;
    --paprika: #C1452B;
    --papier:  #F7F5F0;
    --weiss:   #FFFFFF;
    --linie:   #E2DED5;
    --grau:    #4A5752;
    --grau-h:  #8A948F;
    --hell:    #BFD4CC;

    /*
     * Aus dem Layout von immocenter-ungarn.de übernommen, damit die beiden
     * Seiten als eine Familie erkennbar sind: dasselbe tiefe Grün für die
     * Bühne, Gold als zweite Farbe, heller Grund mit weißen Karten darauf.
     */
    --tief:    #092A1A;
    --gold:    #C8A24A;
    --gold-h:  #DFBE70;
    --grund:   #EFEBE3;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font: 400 17px/1.65 Outfit, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/*
 * Überschriften in einer Serifenschrift, Fließtext serifenlos – genau wie
 * auf immocenter-ungarn.de. Der Schriftzug 0036.immo bleibt Poppins, der
 * gehört zur Marke und nicht zum Seitenlayout.
 */
h1, h2, h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    line-height: 1.22; font-weight: 600; margin: 0 0 14px;
}
h1 { font-size: clamp(31px, 5.2vw, 46px); }
h2 { font-size: clamp(24px, 3.4vw, 31px); }
h3 { font-size: 20px; }
p  { margin: 0 0 16px; }

/* Der kurze Goldstrich unter jeder Abschnittsüberschrift */
.block h2:not(.ohne-strich)::after {
    content: ''; display: block;
    width: 54px; height: 3px; border-radius: 2px;
    background: var(--gold); margin-top: 14px;
}
.block-dunkel h2::after, .mitte h2::after { margin-left: auto; margin-right: auto; }

a { color: var(--pinie); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pinie-d); }

/* Sprungmarke für die Tastaturbedienung */
.sprung {
    position: absolute; left: -9999px; top: 0;
    background: var(--pinie); color: var(--papier);
    padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.sprung:focus { left: 0; }

/* --- Breiten ------------------------------------------------------------ */
/*
 * Alle Bänder sind gleich breit, damit jeder Abschnitt dieselbe linke Kante
 * hat. Ein zu langer Satz liest sich schlecht, deshalb begrenzt .band-schmal
 * nicht das Band, sondern die Zeilenlänge der Textspalte darin. Vorher war
 * das Band selbst schmal und zentriert – dadurch sprang die linke Kante
 * zwischen Abschnitten hin und her.
 */
.band        { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.band-schmal > *  { max-width: 68ch; }
.mitte       { text-align: center; }
.mitte > *   { margin-left: auto; margin-right: auto; }
.mitte .held-knoepfe { justify-content: center; }

/* --- Marke -------------------------------------------------------------- */
.marke {
    display: inline-flex; flex-direction: column; gap: 3px;
    text-decoration: none; color: inherit;
}
.marke-wort {
    font-family: Poppins, system-ui, sans-serif;
    font-size: 34px; line-height: 1; letter-spacing: -0.025em;
}
.marke-ziffern { font-weight: 600; color: var(--pinie); }
.marke-punkt   { font-weight: 600; color: var(--paprika); }
.marke-immo    { font-weight: 500; color: var(--tinte); }
.marke-deskriptor {
    font-size: 10px; font-weight: 500; color: var(--pinie);
    letter-spacing: 0.24em; text-transform: uppercase;
}
.marke-hell .marke-ziffern,
.marke-hell .marke-immo,
.marke-hell .marke-punkt { color: var(--papier); }
.marke-hell .marke-deskriptor { color: var(--hell); }

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf {
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 0; z-index: 50;
}
.kopf-innen {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-top: 20px; padding-bottom: 20px;
}
.menue { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/*
 * :not(.knopf) ist wichtig. Ohne das greift diese Regel auch auf den
 * Anmelde-Knopf, und weil „.menue > a“ genauer ist als „.knopf-klein“,
 * gewinnt hier das padding 4px 0 – die Schrift lief dann aus der runden
 * Fläche heraus und stieß in die Sprachwahl.
 */
.menue > a:not(.knopf) {
    font-size: 15px; text-decoration: none; color: var(--tinte);
    padding: 4px 0; border-bottom: 2px solid transparent;
}
.menue > a:not(.knopf):hover { color: var(--pinie); }
.menue > a.aktiv { color: var(--pinie); border-bottom-color: var(--pinie); }

.sprachwahl {
    display: inline-flex; gap: 8px; align-items: center;
    padding-left: 18px; margin-left: -4px;
    border-left: 1px solid var(--linie);
}
.sprachwahl a {
    font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
    text-decoration: none; color: var(--grau-h); padding: 3px 5px; border-radius: 5px;
}
.sprachwahl a:hover { color: var(--pinie); background: var(--weiss); }
.sprachwahl a.aktiv { color: var(--papier); background: var(--pinie); }

.menue-knopf {
    display: none; background: none; border: 0; cursor: pointer;
    width: 42px; height: 42px; padding: 9px;
}
.menue-knopf span {
    display: block; height: 2px; background: var(--tinte); border-radius: 2px; margin: 4px 0;
}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf {
    display: inline-block; background: var(--pinie); color: var(--papier);
    font-size: 16px; font-weight: 500; text-decoration: none;
    border: 0; border-radius: 99px; padding: 13px 28px; cursor: pointer;
    font-family: inherit;
}
.knopf:hover { background: var(--pinie-d); color: var(--papier); }
.knopf-klein { padding: 8px 18px; font-size: 14px; }
.knopf-hell  { background: var(--papier); color: var(--pinie); }
.knopf-hell:hover { background: var(--weiss); color: var(--pinie-d); }
.nur-link { font-size: 15px; color: var(--hell); }
.nur-link:hover { color: var(--papier); }

/* --- Abschnitte --------------------------------------------------------- */
.held { padding: 64px 0 40px; }
.held-klein { padding: 48px 0 30px; }
/*
 * 18ch war zu eng: „Német vevők. Közös üzlet.“ brach mitten im zweiten Satz
 * um. 28ch lässt beide Sätze je in eine Zeile, text-wrap verteilt bei engen
 * Fenstern gleichmäßig statt ein Wort allein stehen zu lassen.
 */
.held-titel { max-width: 28ch; text-wrap: balance; }
.held-text  { font-size: clamp(17px, 2.2vw, 20px); color: var(--grau); max-width: 56ch; }
.held-knoepfe {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px;
}
.held-preis { font-size: 15px; color: var(--grau); }

/*
 * Held mit Bild: Text links, Handschlag rechts. Bei schmalen Fenstern fällt
 * das Bild unter den Text – minmax(0,…) verhindert, dass die Textspalte vom
 * Bild aus dem Raster gedrückt wird.
 */
.held-raster {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 44px; align-items: center;
}
.held-bild img {
    display: block; width: 100%; max-width: 520px; height: auto;
    border-radius: 18px; margin-left: auto;
}

/* Breites Bild aus dem CRM, in einem Rahmen mit Bildunterschrift */
.schaubild { margin: 36px 0 0; }
.schaubild img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--linie); border-radius: 12px; background: var(--papier);
}
.schaubild figcaption {
    margin-top: 12px; font-size: 15px; color: var(--grau); max-width: 68ch;
}

.block { padding: 54px 0; }
/* Der erste Block schließt direkt an den Kopfbereich an – sonst addieren
   sich zwei Innenabstände zu einem leeren Streifen. */
.held + .block { padding-top: 10px; }
.held + .block-getoent, .held + .block-dunkel { padding-top: 46px; }
.block-getoent { background: var(--weiss); border-block: 1px solid var(--linie); }
.block-dunkel  { background: var(--pinie); color: var(--papier); }
.block-dunkel h2, .block-dunkel p { color: var(--papier); }

.preis-gross {
    font-family: Poppins, system-ui, sans-serif;
    font-size: clamp(26px, 4.4vw, 38px); font-weight: 500; margin-bottom: 6px;
}
.preis-klein { color: var(--hell); }

/* --- Karten ------------------------------------------------------------- */
/*
 * Vier Karten in einer Reihe werden auf 1080 px so schmal, dass jedes Wort
 * einzeln umbricht. Zwei mal zwei liest sich deutlich ruhiger.
 */
.karten {
    display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 30px;
}
@media (min-width: 700px)  { .karten { grid-template-columns: repeat(2, 1fr); } }
.karte {
    background: var(--papier); border: 1px solid var(--linie);
    border-radius: 14px; padding: 24px 24px 10px;
}
.karte-betont { border-color: var(--pinie); }
.karte h3 { color: var(--pinie); }
.karte p  { font-size: 15.5px; color: var(--grau); }

.weiter { margin-top: 30px; }

/* --- Textabschnitte ----------------------------------------------------- */
.punkt { margin-bottom: 40px; }
.punkt:last-child { margin-bottom: 0; }
.punkt h2 { color: var(--pinie); }
.frage { font-size: 19px; color: var(--tinte); }
.gross { font-size: 19px; }

.liste { margin: 0 0 16px; padding-left: 22px; }
.liste li { margin-bottom: 9px; }
.liste-haken { list-style: none; padding-left: 0; }
.liste-haken li { padding-left: 28px; position: relative; }
.liste-haken li::before {
    content: ""; position: absolute; left: 4px; top: 10px;
    width: 9px; height: 5px; border-left: 2px solid var(--pinie);
    border-bottom: 2px solid var(--pinie); transform: rotate(-45deg);
}

.angaben { margin: 0; }
.angaben dt { font-weight: 500; color: var(--pinie); margin-top: 20px; }
.angaben dd { margin: 4px 0 0; }

/* --- Kontakt ------------------------------------------------------------ */
.kontakt-raster {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 44px;
    align-items: start;
}
.kontakt-formular {
    background: var(--weiss); border: 1px solid var(--linie);
    border-radius: 16px; padding: 28px;
}
.tel-block { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.tel-nummer { font-size: 19px; font-weight: 500; text-decoration: none; }
.tel-person  { font-size: 15px; color: var(--tinte); }
.tel-sprache { font-size: 13px; color: var(--grau); }

/* --- Formular ----------------------------------------------------------- */
.feld { margin: 0 0 18px; }
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }
.feld label, .feld legend {
    display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--tinte);
}
.feld input[type="text"], .feld input[type="email"], .feld textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--tinte);
    background: var(--papier); border: 1px solid var(--linie);
    border-radius: 9px; padding: 11px 13px;
}
.feld input:focus, .feld textarea:focus {
    outline: 2px solid var(--pinie); outline-offset: 1px; background: var(--weiss);
}
.feld textarea { resize: vertical; min-height: 96px; }
fieldset.feld { border: 0; padding: 0; margin: 0 0 18px; }

.pflicht { color: var(--paprika); }
.freiwillig { font-weight: 400; color: var(--grau-h); font-size: 13px; }

.haken-reihe { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.haken {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 400; margin: 0; cursor: pointer;
    min-height: 44px;
}
.haken input { width: 19px; height: 19px; accent-color: var(--pinie); }

.hinweis { font-size: 13.5px; color: var(--grau); line-height: 1.55; margin: 0; }

.fehlerkasten {
    background: #FBEEEA; border: 1px solid var(--paprika);
    border-radius: 10px; padding: 14px 18px; margin-bottom: 22px;
}
.fehlerkasten p  { margin: 0 0 6px; }
.fehlerkasten ul { margin: 0; padding-left: 20px; font-size: 15px; }

.danke { padding: 10px 0; }
.danke h2 { color: var(--pinie); }

/* Der Köder für Maschinen: für Menschen unsichtbar, aber nicht display:none –
   manche Maschinen überspringen ausgeblendete Felder bewusst. */
.koeder {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

/* --- Fußzeile ----------------------------------------------------------- */
.fuss { background: var(--tinte); color: var(--papier); padding: 46px 0 34px; margin-top: 0; }
.fuss-innen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px;
}
.fuss-titel { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
              color: var(--hell); margin-bottom: 14px; font-weight: 500; }
.fuss-claim { color: var(--hell); font-size: 15px; margin-top: 14px; }
.fuss-tel   { margin-bottom: 14px; }
.fuss-tel a { color: var(--papier); text-decoration: none; font-size: 16px; }
.fuss-tel a:hover { color: var(--hell); text-decoration: underline; }
.fuss-klein { font-size: 13.5px; color: var(--hell); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.fuss-links a { color: var(--papier); font-size: 14px; }
.fuss-sprachen { align-items: center; gap: 12px; }

/* --- Telefon ------------------------------------------------------------ */
@media (max-width: 860px) {
    .kontakt-raster { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
    .menue-knopf { display: block; }
    .menue {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: var(--papier); border-bottom: 1px solid var(--linie);
        flex-direction: column; align-items: flex-start;
        gap: 4px; padding: 14px 20px 20px;
    }
    .menue.offen { display: flex; }
    .menue > a { width: 100%; padding: 11px 0; min-height: 44px; }
    .kopf-innen { position: relative; flex-wrap: nowrap; }
    .held { padding: 44px 0 36px; }
    .block { padding: 38px 0; }
    .kontakt-formular { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* --- Provisionstabelle auf der Preisseite ------------------------------- */
/*
 * Auf dem Telefon passen fünf Geldspalten nicht nebeneinander. Statt die
 * Schrift unleserlich zu verkleinern, darf die Tabelle seitlich rollen –
 * overflow-x mit -webkit-overflow-scrolling, damit es sich auf dem iPhone
 * richtig anfühlt.
 */
.merke {
    border-left: 4px solid var(--pinie); background: var(--papier);
    padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 26px 0;
}
.merke h3 { margin: 0 0 7px; font-size: 18px; font-weight: 600; color: var(--pinie); }
.merke p  { margin: 0; }

.tab-titel { margin-top: 36px; font-weight: 600; }

/*
 * Der weiche Rand rechts ist kein Schmuck: ohne ihn bricht die Tabelle auf
 * dem Telefon hart an der Fensterkante ab und sieht kaputt aus, statt nach
 * „hier geht es weiter“.
 */
.tabelle-rolle {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent 100%);
}
/* Passt alles hinein, braucht es keinen Verlauf. */
@media (min-width: 760px) {
    .tabelle-rolle { -webkit-mask-image: none; mask-image: none; }
}
.tabelle {
    border-collapse: collapse; width: 100%; min-width: 580px;
    font-variant-numeric: tabular-nums;
}
.tabelle th, .tabelle td {
    padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}
.tabelle thead th {
    font-size: 13px; font-weight: 600; color: var(--grau-h);
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 2px solid var(--linie);
}
.tabelle tbody th {
    text-align: left; font-weight: 600; color: var(--tinte);
}
.tabelle .spalte-uns { background: rgba(28, 91, 74, 0.07); font-weight: 600; color: var(--pinie); }
.tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 720px) {
    .tabelle th, .tabelle td { padding: 11px 12px; }
    .tabelle { min-width: 520px; }
    .held-raster { grid-template-columns: 1fr; gap: 26px; }
    .held-bild { order: -1; }
    .held-bild img { max-width: 420px; margin: 0 auto; }
    .marke-wort { font-size: 29px; }
}

/* --- Anteile, Angebote, Fragen (Preisseite) ---------------------------- */
.anteile {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px; margin: 28px 0 10px;
}
.anteil {
    background: var(--papier); border: 1px solid var(--linie); border-radius: 14px;
    padding: 22px 20px; text-align: center;
}
.anteil b {
    display: block; font-family: Poppins, system-ui, sans-serif;
    font-size: 38px; font-weight: 600; color: var(--pinie); line-height: 1;
}
.anteil strong { display: block; margin-top: 8px; font-size: 17px; }
.anteil span   { display: block; margin-top: 6px; font-size: 14px; color: var(--grau); }

.merke-hell { border-left-color: var(--paprika); background: var(--weiss); }
.merke-hell h3 { color: var(--paprika); }

.angebote {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px; margin-top: 28px;
}
.angebot {
    background: var(--papier); border: 1px solid var(--linie); border-radius: 16px;
    padding: 26px 24px; display: flex; flex-direction: column;
}
/* Das Jahresangebot ist das bessere – es darf auch so aussehen. */
.angebot-hervor { border-color: var(--pinie); border-width: 2px; }
.angebot-name   { font-weight: 600; margin-bottom: 4px; }
.angebot-preis  {
    font-family: Poppins, system-ui, sans-serif; font-size: 34px; font-weight: 600;
    color: var(--pinie); line-height: 1.1; margin: 0;
}
.angebot-zusatz { font-size: 14px; color: var(--grau); margin: 4px 0 14px; }
.angebot-fuer   { margin-bottom: 14px; }
.angebot .liste { margin-bottom: 20px; }
.angebot-knopf  { margin: auto 0 0; }

.fragen { margin-top: 20px; }
.fragen details {
    border-bottom: 1px solid var(--linie); padding: 4px 0;
}
.fragen summary {
    cursor: pointer; padding: 14px 0; font-weight: 500; list-style: none;
    display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.fragen summary::-webkit-details-marker { display: none; }
/* Das Pluszeichen wird zum Minus, wenn die Frage offen ist. */
.fragen summary::after {
    content: '+'; color: var(--pinie); font-size: 22px; line-height: 1; flex: none;
}
.fragen details[open] summary::after { content: '–'; }
.fragen details p { margin: 0 0 16px; color: var(--grau); max-width: 68ch; }

/* --- Kacheln, Schritte, Zahlenband ------------------------------------- */
.kacheln {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px; margin-top: 28px;
}
.kachel {
    background: var(--papier); border: 1px solid var(--linie);
    border-radius: 16px; padding: 24px 22px;
}
.kachel h3 { color: var(--pinie); margin-bottom: 8px; }
.kachel p  { margin-bottom: 12px; }
.kachel .liste { margin: 0; }
.kachel .liste li { font-size: 15px; }

/*
 * Nummerierte Schritte. Die Ziffer steht in einem eigenen Kreis links,
 * counter-reset/increment statt <ol>-Standardziffern, damit sie gestaltbar
 * ist und bei zweistelligen Zahlen nicht verrutscht.
 */
.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 26px 0; }
.schritte li {
    counter-increment: schritt; position: relative;
    padding: 0 0 22px 52px; 
}
.schritte li::before {
    content: counter(schritt);
    position: absolute; left: 0; top: -2px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--pinie); color: var(--papier);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600;
}
.schritte li strong { display: block; margin-bottom: 3px; }
.schritte li span   { display: block; color: var(--grau); }

.liste-weit li { margin-bottom: 14px; }
.liste-weit li strong { color: var(--tinte); }

.zahlenband {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px; margin-top: 40px;
    border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
    padding: 24px 0;
}
.zahlenband div { text-align: center; }
.zahlenband b {
    display: block; font-family: Poppins, system-ui, sans-serif;
    font-size: 27px; font-weight: 600; color: var(--pinie); line-height: 1.1;
}
.zahlenband span { display: block; margin-top: 5px; font-size: 14px; color: var(--grau); }

/* =========================================================================
   Layout nach dem Vorbild von immocenter-ungarn.de
   =========================================================================
   Formatfüllende Bühne mit Foto und grünem Verlauf darüber, darunter das
   Zahlenband als dunkle Tafel, dann der Inhalt in weißen Karten auf hellem
   Grund. Die Klassennamen der Seiten bleiben, was sich ändert, ist nur,
   wie sie aussehen.
   ========================================================================= */

.buehne {
    position: relative;
    background-color: var(--tief);
    background-size: cover; background-position: center;
    color: var(--weiss);
    padding: 92px 0 96px;
}
.buehne-innen { position: relative; z-index: 2; max-width: 820px; }
.buehne-plakette {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--weiss);
    border-radius: 99px; padding: 8px 18px;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    backdrop-filter: blur(3px);
}
.buehne h1 {
    color: var(--weiss); margin: 20px 0 16px;
    font-size: clamp(34px, 6vw, 58px); line-height: 1.08;
}
/* Die zweite Zeile der Überschrift in Gold und kursiv */
.buehne h1 em { display: block; color: var(--gold); font-style: italic; }
.buehne-text {
    font-size: clamp(17px, 2.1vw, 20px); color: rgba(255, 255, 255, 0.92);
    max-width: 56ch; margin-bottom: 30px;
}
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.buehne-nachweis {
    /* 46px, nicht 10: sonst liegt der Nachweis unter der Zahlentafel,
       die mit negativem Abstand in die Bühne hineinragt. */
    position: absolute; right: 18px; bottom: 46px; z-index: 2;
    font-size: 11px; color: rgba(255, 255, 255, 0.62);
    text-decoration: none; max-width: 52%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buehne-nachweis:hover { color: rgba(255, 255, 255, 0.9); }

/* Gold als Hauptknopf auf dunklem Grund, Umriss als zweite Wahl */
.knopf-gold {
    background: var(--gold); color: var(--tief);
}
.knopf-gold:hover { background: var(--gold-h); color: var(--tief); }
.knopf-umriss {
    background: transparent; color: var(--weiss);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.knopf-umriss:hover { background: rgba(255, 255, 255, 0.12); color: var(--weiss); }

/* --- Zahlenband als dunkle Tafel ---------------------------------------- */
.zahlen-tafel { max-width: 1120px; margin: -34px auto 0; padding: 0 20px; position: relative; z-index: 3; }
.zahlenband {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0; margin: 0; padding: 26px 10px;
    background: var(--pinie-d); border: 0; border-radius: 16px;
    box-shadow: 0 14px 34px rgba(9, 42, 26, 0.22);
}
.zahlenband div { text-align: center; padding: 6px 16px; }
.zahlenband div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.zahlenband b {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 30px; font-weight: 600; color: var(--gold); line-height: 1.1;
}
.zahlenband span { color: rgba(255, 255, 255, 0.78); }

/* --- Inhalt in weißen Karten -------------------------------------------- */
main { padding-bottom: 26px; }
.block {
    max-width: 1160px; margin: 22px auto; padding: 40px 0;
    background: var(--weiss); border-radius: 20px;
    box-shadow: 0 1px 2px rgba(21, 32, 28, 0.05);
}
.block > .band { max-width: 1080px; }
.block-getoent { background: var(--papier); border-block: 0; }
.block-dunkel  { background: var(--pinie); }
/* Der dunkle Abschluss darf wieder über die ganze Breite gehen */
.block-dunkel:last-of-type { border-radius: 20px; }

/* Karten innerhalb einer Karte brauchen eine andere Fläche als Weiß */
.block .kachel, .block .karte, .block .anteil, .block .angebot {
    background: var(--papier);
}
.block-getoent .kachel, .block-getoent .karte,
.block-getoent .anteil, .block-getoent .angebot { background: var(--weiss); }

/* Rundes grünes Zeichen oben in jeder Kachel, wie auf der Immocenter-Seite */
.kachel-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kachel-zeichen {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    background: var(--pinie); color: var(--weiss);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.kachel-kopf h3 { margin: 0; }
.kachel h3 { color: var(--tinte); }
.kachel { border-top: 3px solid var(--gold); }

/* Hinweiskästen in Gold statt Grün – sie sollen auffallen, nicht mitlaufen */
.merke { border-left-color: var(--gold); background: var(--papier); }
.merke h3 { color: var(--tinte); }
.block-getoent .merke { background: var(--weiss); }

@media (max-width: 860px) {
    .zahlenband div + div { border-left: 0; }
    .block { border-radius: 16px; margin: 14px 10px; padding: 30px 0; }
    .buehne { padding: 64px 0 70px; }
    .zahlen-tafel { margin-top: -22px; }
}

/* --- Kleine Bühne für die Unterseiten ----------------------------------- */
/*
 * Dieselbe Sprache wie die große Bühne, nur ohne Foto: tiefes Grün, heller
 * Text, Goldstrich unter der Überschrift. So beginnt jede Seite gleich.
 */
.held-klein {
    background: var(--tief); color: var(--weiss);
    padding: 58px 0 54px; margin-bottom: 0;
}
.held-klein .held-titel { color: var(--weiss); max-width: 24ch; }
.held-klein .held-titel::after {
    content: ''; display: block; width: 54px; height: 3px; border-radius: 2px;
    background: var(--gold); margin-top: 16px;
}
.held-klein .held-text { color: rgba(255, 255, 255, 0.88); }
.held-klein + .block { margin-top: 22px; }

/* --- Medienbild im Abschnitt „Was es kann" ------------------------------ */
/*
 * Wie .held-bild, nur mit Bildunterschrift. <figure> bringt einen eigenen
 * Aussenabstand mit, der das Raster verschöbe – deshalb auf null.
 */
.netz-bild { margin: 0; }
.netz-bild figcaption {
    max-width: 520px; margin: 12px 0 0 auto;
    font-size: 15px; line-height: 1.45; color: var(--grau); text-align: right;
}

/* Der zweite Teil desselben Abschnitts steht nicht mehr im selben Band wie
   der erste. Ohne diesen Abstand klebte er am Raster darüber. */
.band-weiter { margin-top: 46px; }

@media (max-width: 720px) {
    /* Anders als im Held gehört hier die Überschrift zuerst – das Bild
       erklärt den Absatz, es eröffnet ihn nicht. */
    .netz-bild { order: 0; }
    .netz-bild figcaption { margin-left: 0; text-align: left; }
    .band-weiter { margin-top: 32px; }
}