﻿/*
Theme Name: Frankonia
Theme URI: https://frankonia.org
Author: Landsmannschaft Frankonia Frankfurt
Description: Block-Theme der Landsmannschaft Frankonia Frankfurt â€” CI Rot/Hellblau/Gold, Futura (Jost) + PT Serif. PrimÃ¤rlinie â€žUltraseriÃ¶s" (Bordeaux/Creme). Aus dem Design-Studio migriert.
Version: 0.3.7
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: frankonia
*/

/* Schriften lokal eingebunden via assets/fonts.css (functions.php enqueue) â€” kein externer Google-Fonts-Aufruf (DSGVO). */

/* Couleur-Band (Rot/Hellblau/Gold) */
.frankonia-couleur{height:5px;width:100%;
  background:linear-gradient(90deg,var(--wp--preset--color--rot) 0 33.3%,var(--wp--preset--color--hellblau) 33.3% 66.6%,var(--wp--preset--color--gold) 66.6% 100%)}

/* Zirkel als CSS-Maske: transparent + kontrastiert zum Hintergrund (currentColor) */
.frankonia-zirkel{display:inline-block;width:2.6rem;height:2.6rem;flex:none;background-color:currentColor;vertical-align:middle;
  -webkit-mask:url(assets/zirkel-clean.svg) center/contain no-repeat;mask:url(assets/zirkel-clean.svg) center/contain no-repeat}

/* Eyebrow / Kicker */
.frankonia-eyebrow{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;font-weight:600;color:var(--wp--preset--color--gold)}

/* Dezente Karten (UltraseriÃ¶s: ruhig, kein starkes Hover) */
.frankonia-card{border:1px solid rgba(34,29,24,.14);border-radius:6px;background:var(--wp--preset--color--papier);transition:box-shadow .2s}
.frankonia-card:hover{box-shadow:0 10px 26px rgba(34,29,24,.08)}
.frankonia-card .wp-block-heading{position:relative;padding-left:.7rem}
.frankonia-card .wp-block-heading::before{content:"";position:absolute;left:0;top:.15em;width:4px;height:1.1em;background:var(--wp--preset--color--gold);border-radius:0 3px 3px 0}

/* Motto */
.frankonia-motto{font-family:var(--wp--preset--font-family--body);font-style:italic}

/* Veranstaltungs-Karte (Sempro) */
.frankonia-event{display:flex;gap:1rem;align-items:center;border:1px solid rgba(34,29,24,.14);border-radius:6px;padding:1rem 1.2rem;background:var(--wp--preset--color--papier)}
.frankonia-event__date{flex:none;min-width:60px;text-align:center;background:var(--wp--preset--color--rot);color:#fff;border-radius:6px;padding:.45rem .3rem;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:.72rem;letter-spacing:.05em}
.frankonia-event__date strong{display:block;font-size:1.4rem;line-height:1}

/* Nav (Header) */
.frankonia-nav a{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;font-weight:600}
/* Mobile-Navigation â€” eigene Regeln, da das Core-Responsive-CSS (min-width:600px) hier NICHT geladen wird */
.frankonia-nav .wp-block-navigation__responsive-container-open,
.frankonia-nav .wp-block-navigation__responsive-container-close{display:none;background:transparent;border:0;padding:.25rem;cursor:pointer}
.frankonia-nav .wp-block-navigation__responsive-container-open svg,
.frankonia-nav .wp-block-navigation__responsive-container-close svg{fill:#7fc7e4;width:30px;height:30px}
/* Menue offen: backdrop-filter am Header AUS, sonst faengt es das position:fixed-Overlay ein (Stacking-Context-Falle) */
.frankonia-header{position:relative}
html.frk-menu-active .frankonia-header{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
/* Menue offen: Hamburger ausblenden -> das X (gleiche Position+Groesse) tritt an exakt seine Stelle (kein Versatz mehr) */
html.frk-menu-active .frankonia-nav .wp-block-navigation__responsive-container-open{display:none !important}
/* Hamburger groesser + besser treffbar (Tap-Target) */
.frankonia-nav .wp-block-navigation__responsive-container-open svg{width:84px !important;height:84px !important}
.frankonia-nav .wp-block-navigation__responsive-container-open{padding:.2rem .55rem}
/* Schriftgroessen-Umschalter (Barrierefreiheit, Stufen via Root-Font-Size) */
html.frk-font-2{font-size:132%}
html.frk-font-3{font-size:148%}
#frk-fontsize{position:fixed;right:.9rem;bottom:.9rem;z-index:9990;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;gap:1px;
  background:rgba(13,19,30,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(127,199,228,.38);border-radius:50%;
  color:#7fc7e4;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.42);padding:0;line-height:1}
#frk-fontsize:hover{background:rgba(20,30,46,.85)}
#frk-fontsize span{font-family:var(--wp--preset--font-family--display,sans-serif);line-height:1;color:inherit}
#frk-fontsize span:first-child{font-size:.85rem}
#frk-fontsize span:last-child{font-size:1.3rem;font-weight:700}
@media(max-width:1023px){   /* gleicher Breakpoint wie der Hero (einspaltig) â†’ konsistent */
  /* Kopfzeile auf EINER Zeile halten: Logo schrumpfbar, Hamburger fest rechts (sonst bricht die Nav unter das Logo) */
  /* Z7-Cover meldet breite CSS-Aufloesung auf kleinem Display -> Schrift physisch winzig: Grundschrift global anheben (Toggle setzt oben drauf) */
  html{font-size:120%;scrollbar-gutter:stable}  /* Scrollleisten-Platz konstant reservieren -> Hamburger (Seite mit Scrollleiste) und X (Menue offen = overflow:hidden) referenzieren dieselbe Breite, kein Versatz */
  /* Kopfzeilen-Titel nicht mitwachsen lassen (sonst Umbruch neben groesserem Hamburger) */
  .frankonia-bar .wp-block-site-title{font-size:.94rem !important}
  .frankonia-bar{flex-wrap:nowrap !important;align-items:center;padding-left:1rem;padding-right:100px;padding-top:.3rem !important;padding-bottom:.3rem !important}
  .frankonia-bar > .wp-block-group:first-child{min-width:0}
  .frankonia-bar > .frankonia-nav{flex:0 0 auto}
  .frankonia-nav .wp-block-navigation__responsive-container-open{display:flex !important;position:fixed;top:10px;right:12px;padding:0;z-index:100001}     /* Hamburger zeigen (schlÃ¤gt Core :not(.always-shown){display:none}) */
  .frankonia-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important} /* Linkleiste verbergen */
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open{display:flex !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;height:100vh !important;box-sizing:border-box !important;z-index:99999 !important;overflow-y:auto;
    background:rgba(6,9,14,.22) !important;flex-direction:column;justify-content:center;align-items:flex-end;padding:4.5rem 1.1rem 2rem;transform:none !important} /* Vollbild-Overlay (schlÃ¤gt Core-Weiss + Core-Positionierung) */
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;right:12px;width:84px;height:84px;border-radius:50%;background:rgba(8,12,20,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(127,199,228,.45);box-shadow:0 6px 20px rgba(0,0,0,.42);z-index:100002}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{display:flex;flex-direction:column;gap:1.7rem;align-items:flex-end;justify-content:center;text-align:center;width:100%;padding:0;margin:0;max-width:none}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open a{color:#f3ece0;font-size:clamp(1.5rem,7.5vw,2.05rem);letter-spacing:.04em;justify-content:center;display:inline-flex}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open svg{fill:#f3ece0}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open ul{align-items:center !important;justify-content:center !important;width:auto !important;max-width:88vw !important;margin:0;
    background:rgba(13,19,30,.42) !important;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1.5px solid rgba(127,199,228,.5);border-radius:20px;padding:1.8rem 1.6rem !important;box-shadow:0 20px 55px rgba(0,0,0,.4)}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open li{text-align:center;width:auto;margin:0}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{padding:0}
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{width:46px;height:46px}
  /* Couleur-Akzent oben im Overlay */
  .frankonia-nav .wp-block-navigation__responsive-container.is-menu-open::before{content:"";position:fixed;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#E73D1F 0 33.3%,#7FC7E4 33.3% 66.6%,#AD8643 66.6% 100%);z-index:1}
}

/* Ãœberschriften nie abschneiden: lange Komposita umbrechen / trennen */
h1,h2,h3,h4,.wp-block-heading{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.frankonia-card .wp-block-heading{hyphens:auto;-webkit-hyphens:auto}

/* Inhaltsseiten (Impressum/Datenschutz â€¦): Silbentrennung + ausbalancierter Umbruch (Seite ist lang="de") */
.wp-block-post-title,.wp-block-post-content h2,.wp-block-post-content h3,.wp-block-post-content p,.wp-block-post-content li{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.wp-block-post-title,.wp-block-post-content h2,.wp-block-post-content h3{text-wrap:balance}
.wp-block-post-content p{text-wrap:pretty}

/* Nixie-Uhr nur im Steampunk-Skin sichtbar (Markup steckt im Hero) */
.frankonia-nixie{display:none}

/* Easteregg: Kuzmins Gesicht auf dem â€žFux werdenâ€œ-Button */
.frankonia-face{display:inline-block;width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.8);margin:-4px .3rem -4px -.4rem;vertical-align:middle}

/* â•â•â• Hero: responsive â€žgrafische Visitenkarteâ€œ â•â•â• */
/* Mobil (Default): LINKSBÃœNDIG gestapelt â€” Wortmarke â†’ Tagline â†’ Motto â†’ Wappen â†’ Stats â†’ CfA */
.frankonia-hero{display:block;text-align:left;
  max-width:var(--wp--style--global--wide-size,1240px);margin-inline:auto;width:100%}
.frankonia-hero>*{margin-top:0;margin-bottom:0;max-width:100%;min-width:0}
.frankonia-hero .fk-eyebrow{margin:0 0 .55rem;white-space:normal;overflow-wrap:break-word;max-width:100%}
.frankonia-hero .fk-title{margin:0;line-height:1.03}
.frankonia-hero .fk-tagline{margin:.45rem 0 0}
.frankonia-hero .fk-motto{margin:.3rem 0 0}                 /* Motto dicht an â€žGemeinsam in Frankfurtâ€œ */
.frankonia-hero .fk-emblem{margin:1.15rem 0 0}
.frankonia-hero .fk-emblem img{width:clamp(155px,46vw,232px);height:auto;display:block;margin-inline:auto;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.frankonia-hero .fk-stats{margin:.65rem 0 0;gap:1rem;justify-content:flex-start}    /* Stats eng + nah am Wappen */
.frankonia-hero .fk-stats p{margin:0}
.frankonia-hero .fk-cta{margin:1.5rem 0 0;justify-content:flex-start;flex-wrap:wrap;width:100%} /* CfA nach der Visitenkarte */

/* Hero-Polster mobil knapper â†’ IdentitÃ¤tsblock rÃ¼ckt nÃ¤her an die Kopfzeile */
@media(max-width:1023px){
  .frankonia-hero-cover{min-height:auto !important;padding-top:1.7rem !important;padding-bottom:2.6rem !important;overflow-x:hidden}
  .frankonia-hero .fk-eyebrow{letter-spacing:.05em;font-size:.62rem;max-width:300px !important;white-space:normal !important;word-break:break-word;margin-inline:0} /* links, hart begrenzt â†’ umbruch */
  .frankonia-hero .fk-title{font-size:clamp(2rem,10vw,3.2rem) !important} /* !important schlÃ¤gt x-large-Preset; passt auf 360 px */
  .frankonia-hero .fk-emblem{margin-top:0.7rem}
  .frankonia-hero .fk-emblem img{width:clamp(150px,44vw,220px);margin-inline:auto} /* grÃ¶ÃŸer + zentriert (Text bleibt links) */
}
/* Sehr schmal: CfA-Buttons untereinander, linksbÃ¼ndig */
@media(max-width:560px){
  .frankonia-hero .fk-cta{flex-direction:column;align-items:flex-start;gap:.6rem}
  .frankonia-hero .fk-cta .wp-block-button{max-width:100%}
}

/* Desktop: zweispaltig â€” Text links, Wappen groÃŸ als grafischer Anker rechts */
@media(min-width:1024px){
  .frankonia-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:max-content;
    grid-template-areas:"eyebrow emblem" "title emblem" "tagline emblem" "motto emblem" "cta emblem" "stats emblem";
    align-items:center;column-gap:3.4rem;text-align:left;width:auto}
  .frankonia-hero .fk-eyebrow{grid-area:eyebrow;margin:0 0 .3rem}
  .frankonia-hero .fk-title{grid-area:title;margin:0}
  .frankonia-hero .fk-tagline{grid-area:tagline;margin:.2rem 0 0}
  .frankonia-hero .fk-motto{grid-area:motto;margin:.25rem 0 0}
  .frankonia-hero .fk-cta{grid-area:cta;justify-content:flex-start;margin:1.7rem 0 0}
  .frankonia-hero .fk-stats{grid-area:stats;justify-content:flex-start;margin:1.5rem 0 0}
  .frankonia-hero .fk-emblem{grid-area:emblem;margin:0;align-self:center;justify-self:center} /* mittig zwischen Textblock und rechtem Rand */
  .frankonia-hero .fk-emblem img{width:clamp(300px,27vw,400px)}   /* deutlich grÃ¶ÃŸer als zuvor (380px) */
}
