/* ── NF-R102, 4.: Kooperationspartner im gemeinsamen NorthFrame-Footer ─────────────────────────
   Eine Stilvorlage fuer alle NorthFrame-Seiten mit dem grossen Footer (Startseite eingeschlossen);
   die Bedienung steht zentral in js/partner.js. Nicht eingebunden in eingebettete Kundenseiten und
   fiktive Beispielauftritte.

   1. Footerbereich - an der Stelle der frueheren Referenzvorschauen ("Ausgewaehlte Arbeiten"):
      zwischen Trennlinie und Einordnungshinweis. Zurueckhaltend: kleine Ueberschrift, ein Eintrag
      mit dem ECHTEN Vereinslogo auf heller Kachel (das Logo ist fuer hellen Grund gezeichnet - seine
      schwarzen Farbspritzer verschwaenden auf dem Footergrund; es wird nicht umgefaerbt), Name und
      ein sichtbarer Hinweis, dass sich weitere Informationen oeffnen lassen.
   2. Informationsdialog (natives <dialog>, showModal): etwa 80 % der sichtbaren Flaeche mit GLEICHEM
      Abstand zu allen vier Kanten. Gesucht ist der Rand m mit (B - 2m)(H - 2m) = 0,8 B H:
          4m^2 - 2(B + H)m + 0,2 B H = 0
          m = ((B + H) - sqrt((B + H)^2 - 0,8 B H)) / 4 = ((B + H) - hypot(B + 0,6 H, 0,8 H)) / 4
      (denn (B + H)^2 - 0,8 B H = (B + 0,6 H)^2 + (0,8 H)^2). B = 100vw, H = 100dvh - die dynamische
      Hoehe folgt den mobilen Browserleisten. Beispiele: 390 x 844 -> m = 28 px, 1440 x 900 ->
      m = 58 px, 844 x 390 -> m = 28 px. Der Rand ist mindestens 12 px und mindestens der sichere
      Bildschirmrand + 12 px (Notch, Querformat). Links/rechts wird ueber left/right gesetzt, oben
      ueber top und die Hoehe. Rechts wird eine reservierte Bildlaufleisten-Rinne (100vw - 100 % des
      festen Bezugsrahmens; die Startseite haelt sie mit scrollbar-gutter:stable immer frei) wieder
      abgezogen - der Rand zur Fensterkante ist damit auf allen vier Seiten derselbe. Ohne hypot()/dvh: naeherungsweise 4,5 vmin bzw. 100vh.
      Schriftgroessen in rem (folgen der Schriftgroesseneinstellung des Browsers). Der Text behaelt
      eine begrenzte Lesebreite (60 ch); passt der Inhalt nicht (Querformat,
      vergroesserte Schrift), scrollt der Dialog in sich, die Schliessleiste bleibt oben stehen. */

/* ── 1 · Footerbereich ─────────────────────────────────────────────────────────────────────── */
.gross-footer .gf-partner{margin:0 auto 30px;max-width:720px;text-align:center}
.gross-footer .gf-partner-titel{margin:0 0 14px;font-family:inherit;font-size:11.5px;font-weight:600;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:#8b94a7}
.gross-footer .gf-partner-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gross-footer .gf-partner-liste li{margin:0;padding:0}
.gross-footer .gf-partner-eintrag{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin:0;
  padding:10px 22px 10px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  color:#e7ebf2;text-decoration:none;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease}
.gross-footer .gf-partner-logo{flex:none;display:block;width:96px;padding:7px 9px;border-radius:10px;background:#f6f4ef;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.gross-footer .gf-partner-logo img{display:block;width:100%;height:auto}
.gross-footer .gf-partner-text{display:block;min-width:0}
.gross-footer .gf-partner-name{display:block;font-size:15px;font-weight:600;line-height:1.35;color:#e7ebf2}
.gross-footer .gf-partner-mehr{display:inline-flex;align-items:center;gap:7px;margin-top:5px;font-size:13px;font-weight:600;
  letter-spacing:.02em;color:#c49a56}
/* Zeichen "i" im Kreis: weitere Informationen */
.gross-footer .gf-partner-mehr::before{content:'i';display:inline-grid;place-items:center;width:16px;height:16px;
  border-radius:50%;border:1px solid currentColor;font-family:Georgia,'Times New Roman',serif;font-size:11px;
  font-style:italic;font-weight:700;line-height:1}
@media (hover:hover) and (pointer:fine){
  .gross-footer .gf-partner-eintrag:hover{border-color:rgba(196,154,86,.6);background:rgba(196,154,86,.07)}
}
.gross-footer .gf-partner-eintrag:focus-visible{outline:2px solid #d4b27a;outline-offset:3px}
/* NF-R110: Hinweis direkt unter dem Eintrag - steht im HTML, also auch ohne Skript sichtbar. Der Listenpunkt
   stapelt Eintrag und Hinweis; die Zeile bleibt schmal und bricht ordentlich um (320 px). */
.gross-footer .gf-partner-liste li{display:flex;flex-direction:column;align-items:center;min-width:0}
.gross-footer .gf-partner-notiz{margin:10px 0 0;max-width:46ch;font-family:inherit;font-size:12.5px;font-weight:400;
  font-style:normal;line-height:1.55;letter-spacing:0;text-transform:none;text-align:center;color:#aeb6c6;
  overflow-wrap:break-word;text-wrap:balance}
.gross-footer .gf-partner+.gf-hinweis{margin-top:0}
@media (max-width:767px){
  .gross-footer .gf-partner{margin-bottom:26px}
  .gross-footer .gf-partner-liste{justify-content:stretch}
  .gross-footer .gf-partner-liste li{flex:1 1 100%;align-items:stretch}
  .gross-footer .gf-partner-eintrag{display:flex;width:100%;gap:14px;padding:10px 16px 10px 10px}
  .gross-footer .gf-partner-logo{width:84px}
}

/* ── 2 · Informationsdialog ────────────────────────────────────────────────────────────────── */
/* Hintergrundsperre wie beim Hauptmenue (assets/css/hauptmenue.css): die Rinne einer klassischen
   Bildlaufleiste bleibt reserviert, damit sich die Breite beim Oeffnen nicht aendert. */
html.nf-partner-offen{overflow:hidden!important}
html.nf-partner-offen.nf-partner-rinne{scrollbar-gutter:stable}

.nf-partner{--nf-m:4.5vmin;--nf-h:100vh;
  --nf-grund:#070b12;--nf-tinte:#e7ebf2;--nf-leise:#aeb6c6;--nf-gold:#c49a56;--nf-linie:rgba(196,154,86,.3)}
@supports (height:100dvh){.nf-partner{--nf-h:100dvh}}
@supports (width:hypot(3px,4px)){
  .nf-partner{--nf-m:calc((100vw + var(--nf-h) - hypot(100vw + .6 * var(--nf-h), .8 * var(--nf-h))) / 4)}
}
.nf-partner{--nf-r:max(var(--nf-m),12px,calc(env(safe-area-inset-top,0px) + 12px),calc(env(safe-area-inset-right,0px) + 12px),
  calc(env(safe-area-inset-bottom,0px) + 12px),calc(env(safe-area-inset-left,0px) + 12px));
  position:fixed;inset:auto;top:var(--nf-r);left:var(--nf-r);right:calc(var(--nf-r) - (100vw - 100%));bottom:auto;
  width:auto;height:calc(var(--nf-h) - 2 * var(--nf-r));max-width:none;max-height:none;margin:0;padding:0;
  box-sizing:border-box;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border:1px solid var(--nf-linie);border-radius:22px;color:var(--nf-tinte);
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(196,154,86,.10),transparent 62%),
    linear-gradient(180deg,#0a101a,var(--nf-grund));
  background-color:var(--nf-grund);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
.nf-partner:not([open]){display:none}
.nf-partner::backdrop{background:rgba(3,6,12,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.nf-partner-innen{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;
  padding:0 clamp(18px,4vw,56px) clamp(22px,4vw,52px)}
/* Schliessleiste: bleibt beim Scrollen im Dialog oben stehen */
.nf-partner-kopf{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;
  margin:0 calc(-1 * clamp(18px,4vw,56px));padding:clamp(12px,2vw,20px) clamp(12px,2vw,20px) 8px;
  background:linear-gradient(180deg,var(--nf-grund) 72%,color-mix(in srgb,var(--nf-grund) 0%,transparent))}
.nf-partner-zu{display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;margin:0;padding:0 16px 0 14px;
  border-radius:999px;border:1px solid var(--nf-linie);background:color-mix(in srgb,var(--nf-grund) 80%,transparent);
  color:var(--nf-tinte);font:inherit;font-size:.875rem;font-weight:600;letter-spacing:.02em;line-height:1;cursor:pointer}
.nf-partner-zu::before{content:'';width:12px;height:12px;flex:none;
  background:linear-gradient(45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),
    linear-gradient(-45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px))}
@media (hover:hover) and (pointer:fine){.nf-partner-zu:hover{border-color:var(--nf-gold);color:var(--nf-gold)}}
.nf-partner-zu:focus-visible,.nf-partner-link:focus-visible{outline:2px solid var(--nf-gold);outline-offset:3px}

.nf-partner-inhalt{box-sizing:border-box;width:100%;max-width:60ch;margin:auto;padding:clamp(4px,2vw,20px) 0;
  overflow-wrap:break-word}
/* Vergroesserte Schrift: das gesperrte Einzelwort der Marke darf umbrechen, statt ueber den Rand zu laufen */
.nf-partner-marke,.nf-partner-name{overflow-wrap:anywhere}
.nf-partner-logo{display:block;width:min(240px,58%);margin:0 0 clamp(20px,3vh,30px);padding:14px 18px;border-radius:14px;
  background:#f6f4ef;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.nf-partner-logo img{display:block;width:100%;height:auto}
.nf-partner-marke{margin:0 0 8px;font-size:.72rem;font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nf-gold)}
.nf-partner-name{margin:0 0 16px;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.5rem);
  font-weight:600;line-height:1.12;color:var(--nf-tinte)}
.nf-partner-text p{margin:0 0 .9em;font-size:clamp(.97rem,.9rem + .3vw,1.06rem);line-height:1.7;color:var(--nf-leise)}
.nf-partner-text p:last-child{margin-bottom:0}
/* NF-R110: Hinweis unmittelbar vor dem Vereinslink */
.nf-partner-notiz{margin:clamp(16px,2.4vh,22px) 0 0;padding:.75em 0 0;border-top:1px solid rgba(255,255,255,.12);
  font-size:clamp(.86rem,.82rem + .2vw,.93rem);line-height:1.6;color:var(--nf-leise)}
.nf-partner-notiz+.nf-partner-link{margin-top:clamp(14px,2vh,18px)}
.nf-partner-link{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin:clamp(20px,3vh,28px) 0 0;
  padding:0 22px;border-radius:999px;border:1px solid var(--nf-gold);background:color-mix(in srgb,var(--nf-gold) 14%,transparent);
  color:var(--nf-gold);font-size:.94rem;font-weight:600;text-decoration:none}
@media (hover:hover) and (pointer:fine){.nf-partner-link:hover{background:color-mix(in srgb,var(--nf-gold) 24%,transparent)}}
.nf-partner-hinweis{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Querformat mit wenig Hoehe: Logo links neben dem Text */
@media (orientation:landscape) and (max-height:560px){
  .nf-partner-inhalt{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);column-gap:28px;max-width:84ch}
  .nf-partner-logo{grid-column:1;grid-row:1 / span 5;width:100%;margin:4px 0 0;align-self:start}
  .nf-partner-inhalt>:not(.nf-partner-logo){grid-column:2}
  .nf-partner-link{justify-self:start}
}

/* Kurze, dezente Oeffnung - nur mit Bewegung */
@media (prefers-reduced-motion:no-preference){
  .nf-partner[open]{animation:nf-partner-auf .3s cubic-bezier(.23,1,.32,1)}
  .nf-partner[open]::backdrop{animation:nf-partner-schleier .3s ease}
}
@keyframes nf-partner-auf{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes nf-partner-schleier{from{opacity:0}}
/* NF-R107: Sehr schmale Ansichten (Vergroesserung, unter 300 CSS-px). Logo und Name standen nebeneinander, und
   "Mecklenburg-Vorpommern" ist ein langes Wort: der Eintrag war bei 240 px 12 px breiter als die Seite (Seitenbreite
   252 px auf Anfrage, Werbevideos und Printdesign). Jetzt steht der Name unter dem Logo und darf am Bindestrich
   umbrechen (die Wortgruppe .nf-mg bleibt hier gewoehnlicher Text). */
@media (max-width:299px){
  .gross-footer .gf-partner-liste li{min-width:0}
  .gross-footer .gf-partner-eintrag{flex-direction:column;align-items:flex-start;gap:10px;padding:10px 12px}
  .gross-footer .gf-partner-name .nf-mg{display:inline}
  .gross-footer .gf-partner-name{overflow-wrap:break-word}
}