/* Seiten-Verbund: identischer Block auf allen Patock-Seiten.
   Reihenfolge: Ankauf (Orange) · Patock Gruppe (Blau) · Stammtisch (Gruen) · MiMi (Beere). */
.netzwerk { padding: 34px 0 56px; background: #f7fafc; }
.netzwerk .nw-container { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.netzwerk h2 { font-family: "Century Gothic", Montserrat, "Segoe UI", system-ui, sans-serif; font-size: clamp(22px, 3.5vw, 28px); text-align: center; margin: 0 0 6px; color: #16191C; }
.netzwerk .netz-sub { text-align: center; font-size: 14.5px; color: #595959; max-width: 560px; margin: 0 auto 22px; }
.netz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .netz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .netz-grid { grid-template-columns: 1fr; } }
.netz-karte { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 2px solid #E3E7EA; border-top-width: 5px; border-radius: 16px; padding: 20px 20px 18px; text-decoration: none; color: #16191C; transition: transform .18s, box-shadow .18s; position: relative; }
.netz-karte:hover { transform: translateY(-4px); }
.netz-karte .ico { font-size: 32px; line-height: 1; }
.netz-karte h3 { font-size: 16.5px; margin: 0; color: #16191C; }
.netz-karte p { font-size: 13.5px; color: #595959; flex: 1; margin: 0; line-height: 1.5; }
.netz-karte .netz-cta { font-size: 14px; font-weight: 700; }
.nk-ankauf { border-top-color: #FF7D0F; }
.nk-ankauf .netz-cta { color: #FF7D0F; }
.nk-ankauf:hover { box-shadow: 0 14px 34px rgba(255, 125, 15, .18); }
.nk-ankauf .hier-badge { background: #FF7D0F; }
.nk-gruppe { border-top-color: #0091C8; }
.nk-gruppe .netz-cta { color: #0091C8; }
.nk-gruppe:hover { box-shadow: 0 14px 34px rgba(0, 145, 200, .18); }
.nk-gruppe .hier-badge { background: #0091C8; }
.nk-stammtisch { border-top-color: #25D366; }
.nk-stammtisch .netz-cta { color: #128C7E; }
.nk-stammtisch:hover { box-shadow: 0 14px 34px rgba(37, 211, 102, .20); }
.nk-stammtisch .hier-badge { background: #128C7E; }
.nk-mimi { border-top-color: #C2185B; }
.nk-mimi .netz-cta { color: #C2185B; }
.nk-mimi:hover { box-shadow: 0 14px 34px rgba(194, 24, 91, .18); }
.nk-mimi .hier-badge { background: #C2185B; }
.hier-badge { position: absolute; top: -11px; right: 14px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }
.domain-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.domain-chips span { font-size: 12px; font-weight: 600; color: #E96D05; background: #FFF1E6; border: 1px solid #f5d9bd; border-radius: 999px; padding: 4px 10px; }

/* Kompakte Verbund-Navigation im Seitenkopf: ON/OFF-Schalter je Homepage.
   Aktive Seite = Schalter AN in Markenfarbe ("HIER"), andere AUS ("HIN?").
   Klick auf einen AUS-Schalter schaltet erst um (Animation) und navigiert dann. */
.topnav { display: flex; align-items: flex-start; gap: 14px; }
.topnav a.tn-switch { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; border: 0; background: none; padding: 0; }
.tn-switch .knebel { position: relative; width: 52px; height: 26px; border-radius: 999px; background: #D9DEE3; box-shadow: inset 0 2px 4px rgba(22, 25, 28, .18); transition: background .3s ease; flex-shrink: 0; }
.tn-switch .knopf { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(22, 25, 28, .35); transition: left .3s ease; }
.tn-switch .zust { position: absolute; top: 50%; transform: translateY(-50%); font-size: 8px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.tn-switch .zust-an { left: 7px; color: #fff; opacity: 0; transition: opacity .25s; }
.tn-switch .zust-aus { right: 5px; color: #8A939B; transition: opacity .25s; }
.tn-switch.an .knopf { left: 28px; }
.tn-switch.an .zust-an { opacity: 1; }
.tn-switch.an .zust-aus { opacity: 0; }
.tn-ankauf.an .knebel { background: #FF7D0F; }
.tn-gruppe.an .knebel { background: #0091C8; }
.tn-stammtisch.an .knebel { background: #25D366; }
.tn-mimi.an .knebel { background: #C2185B; }
.tn-switch:hover .knebel { filter: brightness(1.06); }
.tn-switch .dom { font-size: 9.5px; font-weight: 700; color: #595959; white-space: nowrap; line-height: 1.2; }
.tn-switch.an .dom { color: #16191C; }
.tn-switch .dom-kurz { display: none; }
@media (max-width: 920px) {
  .topnav { gap: 10px; }
  .tn-switch .dom-lang { display: none; }
  .tn-switch .dom-kurz { display: block; }
  .tn-switch .knebel { width: 46px; height: 23px; }
  .tn-switch .knopf { width: 19px; height: 19px; }
  .tn-switch.an .knopf { left: 25px; }
}
/* Hauptseite (#hdr): Wuerfel fest in Zeile 1 rechts, klassische Navigation als eigene Zeile darunter.
   Hohe Spezifitaet noetig, weil app.css mit ".hdr nav" sonst auch die Wuerfel-Leiste stylt
   (mobil sogar als verstecktes Dropdown positioniert). */
#hdr .container { flex-wrap: wrap; }
#hdr .container > .topnav { position: static; transform: none; flex-direction: row; gap: 9px; background: none; box-shadow: none; padding: 0; margin-left: auto; top: auto; }
#hdr .container > .topnav a { width: auto; padding: 0; }
.hdr.scrolled .topnav a { border-color: #E3E7EA; }
@media (min-width: 861px) {
  #hdr nav#nav { flex-basis: 100%; justify-content: center; gap: 1.6rem; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hdr.scrolled nav#nav { border-top-color: rgba(22, 25, 28, .08); }
}
@media (max-width: 860px) {
  #hdr .container > .topnav { margin-right: 8px; }

}

/* Hauptseite: Header darf mit der zweiten Navigationszeile wachsen (app.css setzt starre 74px,
   dadurch wurde Zeile 1 oben abgeschnitten) */
#hdr { height: auto; min-height: 74px; padding: 10px 0; }

/* Topnav: Ankauf-Wuerfel klappt die 3 Ankauf-Domains auf (Desktop) */
.tn-halter { position: relative; display: inline-flex; }
.tn-drop { display: none; position: absolute; top: 100%; right: 0; padding-top: 8px; z-index: 300; }
.tn-drop-inner { display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #E3E7EA; border-radius: 12px; box-shadow: 0 12px 30px rgba(22, 25, 28, .20); padding: 8px; min-width: 220px; }
.tn-halter:hover .tn-drop, .tn-halter:focus-within .tn-drop { display: block; }
.tn-drop-inner a { font-size: 12.5px; font-weight: 600; color: #E96D05; background: #FFF1E6; border: 1px solid #F5D9BD; border-radius: 999px; padding: 7px 12px; text-decoration: none; white-space: nowrap; text-align: center; }
.tn-drop-inner a:hover { background: #FF7D0F; border-color: #FF7D0F; color: #fff; }
@media (max-width: 920px) { .tn-drop { display: none !important; } }

/* Verbund-Karten: Ankauf-Karte mit klickbaren Domain-Chips (stretched-link-Muster) */
.netz-karte .karten-link { position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.domain-chips { position: relative; z-index: 2; }
.domain-chips a { font-size: 12px; font-weight: 600; color: #E96D05; background: #FFF1E6; border: 1px solid #f5d9bd; border-radius: 999px; padding: 4px 10px; text-decoration: none; transition: background .15s, color .15s; }
.domain-chips a:hover { background: #FF7D0F; border-color: #FF7D0F; color: #fff; }

/* Domain-Labels der Schalter auf dem dunklen Hauptseiten-Header */
#hdr .tn-switch .dom { color: rgba(255, 255, 255, .85); }
.hdr.scrolled .tn-switch .dom { color: #16191C; }

/* Topnav v5: ALLE 7 Homepages als eigene Schalter (kein Dropdown mehr).
   Die 3 Ankauf-Domains teilen sich Orange; mannimindset bekommt Violett. */
.topnav { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; gap: 12px; }
.tn-switch .dom { font-size: 9px; }
.tn-ankauf2.an .knebel, .tn-ankauf3.an .knebel { background: #FF7D0F; }
.tn-mindset.an .knebel { background: #7C3AED; }
.tn-mindset:hover .knebel { filter: brightness(1.06); }
@media (max-width: 920px) {
  .topnav { gap: 8px; row-gap: 6px; }
  .tn-switch .dom { font-size: 8px; }
}

/* Topnav v7: groessere Schalter, eigene zentrierte Kopfzeile, Sprechblasen + Idle-Wackeln */
.topnav { flex-basis: 100%; justify-content: center; gap: 18px; row-gap: 10px; margin-top: 6px; }
.tn-switch .knebel { width: 64px; height: 31px; }
.tn-switch .knopf { width: 27px; height: 27px; }
.tn-switch.an .knopf { left: 35px; }
.tn-switch .zust { font-size: 9.5px; }
.tn-switch .zust-an { left: 9px; }
.tn-switch .zust-aus { right: 7px; }
.tn-switch .dom { font-size: 10px; }
/* Idle: die Schalter wackeln nacheinander (alle 3 s der naechste, 21-s-Runde) */
.topnav .tn-switch:nth-of-type(1) .knebel { animation-delay: 0s; }
.topnav .tn-switch:nth-of-type(2) .knebel { animation-delay: 3s; }
.topnav .tn-switch:nth-of-type(3) .knebel { animation-delay: 6s; }
.topnav .tn-switch:nth-of-type(4) .knebel { animation-delay: 9s; }
.topnav .tn-switch:nth-of-type(5) .knebel { animation-delay: 12s; }
.topnav .tn-switch:nth-of-type(6) .knebel { animation-delay: 15s; }
.topnav .tn-switch:nth-of-type(7) .knebel { animation-delay: 18s; }
@media (prefers-reduced-motion: reduce) { .topnav .tn-switch .knebel { animation: none; } }
/* Sprechblase bei Hover: neugierig machen bzw. Standort bestaetigen */
.tn-switch { position: relative; }
.tn-switch .blase { display: none; position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); background: #16191C; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.5; padding: 9px 13px; border-radius: 10px; white-space: nowrap; z-index: 400; box-shadow: 0 10px 24px rgba(22, 25, 28, .32); text-align: center; }
.tn-switch .blase b { font-weight: 700; }
.tn-switch .blase::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #16191C; }
.tn-switch:hover .blase { display: block; }
@media (max-width: 920px) {
  .topnav { gap: 10px; row-gap: 8px; }
  .tn-switch .knebel { width: 50px; height: 25px; }
  .tn-switch .knopf { width: 21px; height: 21px; }
  .tn-switch.an .knopf { left: 27px; }
  .tn-switch .dom { font-size: 8px; }
  .tn-switch .blase { display: none !important; }
}

/* Alte Textnavigation entfaellt (einzige Unterseite Coaching laeuft ueber mannimindset-Schalter) */
#hdr nav#nav, #hdr .burger { display: none !important; }
#hdr .container > .topnav { margin-left: 0; }


/* Quicktipp unterhalb des Schalters (oben ragte er aus dem Kopf) + Auto-Toast */
.tn-switch .blase { bottom: auto; top: calc(100% + 9px); }
.tn-switch .blase::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #16191C; }
.tn-switch .blase.zeig { display: block; animation: blase-rein .25s ease; }
@keyframes blase-rein { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Unterseiten-Koepfe: Schalterleiste darf in eigene Zeile umbrechen, Logos nicht quetschen */
.pagehdr .container, .site-header .header-inner { flex-wrap: wrap; }
.pagehdr-logo, .brand-logo { flex-shrink: 0; }


/* Einheitliches Schalter-Band: gleiche Groesse, gleiche Stelle, gleicher Look auf ALLEN Seiten */
.topnav { flex-basis: 100%; justify-content: center; gap: 18px; row-gap: 8px; background: #fff; border: 1px solid #ECEFF1; border-radius: 14px; padding: 10px 16px 7px; margin: 8px 0 2px; box-shadow: 0 4px 14px rgba(22, 25, 28, .06); }
.tn-switch .dom { color: #595959; }
.tn-switch.an .dom { color: #16191C; }

#hdr .tn-switch .dom { color: #595959; }
#hdr .tn-switch.an .dom { color: #16191C; }


/* Blasen duerfen den Seitenrand nicht aufreissen */
.tn-switch .blase { white-space: normal; max-width: 230px; width: max-content; }
html, body { overflow-x: hidden; }

/* Hauptseite: weisses Schalter-Band gewinnt auch gegen die #hdr-Regel */
#hdr .container > .topnav { background: #fff; border: 1px solid #ECEFF1; border-radius: 14px; padding: 10px 16px 7px; margin: 8px 0 2px; box-shadow: 0 4px 14px rgba(22, 25, 28, .06); flex-basis: 100%; justify-content: center; gap: 18px; }

/* Grosse Pille mit unsichtbarer Hilfstabelle: 7 exakt gleiche Spalten, identische Abstaende */
.topnav { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; align-items: start; justify-items: stretch; border-radius: 999px; padding: 12px 20px 8px; }
.topnav a.tn-switch { width: 100%; min-width: 0; padding: 0 3px; }
.tn-switch .dom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1120px) { .tn-switch .dom-lang { display: none; } .tn-switch .dom-kurz { display: block; } }
@media (max-width: 560px) { .topnav { grid-template-columns: repeat(4, 1fr); row-gap: 8px; border-radius: 22px; } }

#hdr .container > .topnav { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border-radius: 999px; padding: 12px 20px 8px; }
@media (max-width: 560px) { #hdr .container > .topnav { grid-template-columns: repeat(4, 1fr); } }


/* Lange Domain-Labels passen ohne Abschneiden in die gleichmaessigen Zellen */
.tn-switch .dom-lang { font-size: 9px; letter-spacing: -0.015em; }
.topnav a.tn-switch { padding: 0 2px; }

/* Header wachsen mit dem Schalter-Band mit, statt es uebers Logo zu schieben */
.pagehdr { height: auto; min-height: 66px; padding: 10px 0; }
.site-header .header-inner { height: auto; min-height: 72px; padding: 8px 0; }

/* Unsichtbare Header-Tabelle: Zeile 1 Logo (48px, links) + Extras rechts, Zeile 2 Schalter-Band — ueberall identische Position */
#hdr, .pagehdr { padding: 0; }
#hdr .container, .pagehdr > .container, .site-header .header-inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 48px auto; row-gap: 8px; align-items: center; padding: 10px 20px 12px; max-width: 1140px; margin: 0 auto; width: 100%; box-sizing: border-box; }
#hdr .container > a:first-child, .pagehdr > .container > a:first-child, .site-header .header-inner > a:first-child { grid-row: 1; grid-column: 1; justify-self: start; }
#hdr .container > .topnav, .pagehdr > .container > .topnav, .site-header .header-inner > .topnav { grid-row: 2; grid-column: 1 / -1; }
#hdr .container > :not(.topnav):not(:first-child), .pagehdr > .container > :not(.topnav):not(:first-child), .site-header .header-inner > :not(.topnav):not(:first-child) { grid-row: 1; grid-column: 2; justify-self: end; }

#hdr .container > .topnav, .pagehdr > .container > .topnav, .site-header .header-inner > .topnav { margin: 0; }


/* Einheitliche, gut lesbare Logo-Groesse: 46px in 56px-Zeile */
#hdr .container, .pagehdr > .container, .site-header .header-inner { grid-template-rows: 56px auto; }
#hdr .container > a:first-child img, .pagehdr > .container > a:first-child img, .site-header .header-inner > a:first-child img { height: 46px; width: auto; max-width: none; }

/* ===== REDESIGN 17.07.2026 (6): Schalter nur Gruen/Grau + Handy 3-spaltig (Hauptseite + Unterseiten) ===== */
.tn-switch.an .knebel { background: #25D366; }
.tn-ankauf.an .knebel, .tn-ankauf2.an .knebel, .tn-ankauf3.an .knebel, .tn-gruppe.an .knebel, .tn-mimi.an .knebel, .tn-mindset.an .knebel, .tn-stammtisch.an .knebel { background: #25D366; }
.tn-switch:hover .knebel { filter: brightness(1.05); }
.tn-switch .blase { display: none !important; }
.tn-switch .dom-kurz { display: none !important; }
.tn-switch .dom-lang { display: block !important; }
.tn-switch .dom { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.15; }
@media (max-width: 920px) {
  #hdr .container > .topnav, .pagehdr > .container > .topnav, .site-header .header-inner > .topnav { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 6px; min-width: 0; max-width: 100%; box-sizing: border-box; }
  #hdr .container > .topnav .tn-switch, .pagehdr > .container > .topnav .tn-switch, .site-header .header-inner > .topnav .tn-switch { flex: 0 0 calc(25% - 6px); min-width: 0; width: auto; padding: 0 2px; }
  .tn-switch .knebel { width: 56px; height: 27px; }
  .tn-switch .knopf { width: 21px; height: 21px; }
  .tn-switch.an .knopf { left: 33px; }
  .tn-switch .zust { font-size: 9px; }
  .tn-switch .zust-an { left: 9px; }
  .tn-switch .zust-aus { right: 8px; }
  .tn-switch .dom, .tn-switch .dom-lang { font-size: 9px; letter-spacing: 0; word-break: break-word; hyphens: auto; }
}
@media (max-width: 560px) {
  #hdr .container > .topnav .tn-switch, .pagehdr > .container > .topnav .tn-switch, .site-header .header-inner > .topnav .tn-switch { flex: 0 0 calc(33.333% - 6px); }
  .tn-switch .dom, .tn-switch .dom-lang { font-size: 8.5px; }
  #hdr .container, .pagehdr > .container, .site-header .header-inner { grid-template-rows: 46px auto; }
  #hdr .container > a:first-child img, .pagehdr > .container > a:first-child img, .site-header .header-inner > a:first-child img { height: 38px; width: auto; max-width: 62vw; }
}

/* Logo-Angleichung wie auf den Einzelseiten: Bild-Logos 54px (Benchmark Stammtisch-Wortmarke) */
#hdr .container > a:first-child img, .pagehdr > .container > a:first-child img, .site-header .header-inner > a:first-child img { height: 54px; width: auto; max-width: none; }
@media (max-width: 560px) {
  #hdr .container > a:first-child img, .pagehdr > .container > a:first-child img, .site-header .header-inner > a:first-child img { height: 42px; width: auto; max-width: 62vw; }
}

/* Hauptseite: Kopf immer weiss wie bei den anderen Seiten — die Pille integriert sich,
   statt auf dem dunklen Hero zu schweben. Header aus dem Fixed-Overlay in den Fluss geholt. */
#hdr { position: static; background: #fff; border-bottom: 1px solid #E3E7EA; box-shadow: none; }
#hdr.scrolled { background: #fff; backdrop-filter: none; box-shadow: none; border-bottom: 1px solid #E3E7EA; }
#hdr .l-light { display: none !important; }
#hdr .l-dark { display: block !important; }