/* ============================================================
   v2.css - Optische Aufwertung (Version 2)
   Friseurinnung Kreis Emmendingen · Gehring Media 2026
   Laedt NACH site.css und verfeinert das bestehende Design:
   Markenblau #0054a6 als Akzent, Karten-Optik, sanfte
   Uebergaenge, modernere Buttons/Formulare.
   ============================================================ */

:root{
  --fi-blau:#0054a6;
  --fi-blau-dunkel:#003e7d;
  --fi-blau-hell:#e8f1fa;
  --fi-dunkel:#1e1e1e;
  --fi-radius:10px;
  --fi-schatten:0 6px 24px rgba(0,32,74,.10);
  --fi-schatten-hover:0 12px 32px rgba(0,32,74,.18);
}

/* ---------- Grundstimmung ---------- */
html{scroll-behavior:smooth}
::selection{background:var(--fi-blau);color:#fff}
a{transition:color .2s ease}
:focus-visible{outline:3px solid var(--fi-blau);outline-offset:2px;border-radius:3px}

/* ---------- Header & Navigation ---------- */
.site-header{
  border-bottom:3px solid var(--fi-blau);
  box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.main-navigation__list-item a{position:relative;transition:color .2s ease}
.main-navigation__list-item a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:#fff;transition:width .25s ease;
}
.main-navigation__list-item a:hover::after,
.main-navigation__list-item a[aria-current="true"]::after{width:100%}

/* ---------- Ueberschriften ---------- */
h1{position:relative;padding-bottom:.45em}
h1::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;
  border-radius:2px;background:var(--fi-blau);
}
main h2,main h3{color:var(--fi-dunkel)}

/* ---------- Bilder & Header-Bild ---------- */
main img.img-fluid,
main img.image-element{border-radius:var(--fi-radius)}
.header-image__wrapper img{border-radius:0}

/* ---------- Teaser-Karten ---------- */
.teaser{
  background:#fff;border-radius:var(--fi-radius);overflow:hidden;
  box-shadow:var(--fi-schatten);
  transition:transform .25s ease,box-shadow .25s ease;
}
.teaser:hover{transform:translateY(-5px);box-shadow:var(--fi-schatten-hover)}
.teaser__figure{overflow:hidden;margin-bottom:0}
.teaser__figure img{
  border-radius:0;transition:transform .4s ease;display:block;width:100%;
}
.teaser:hover .teaser__figure img{transform:scale(1.05)}
.teaser__caption{padding:1.1rem 1.25rem 1.4rem}
.teaser__title{color:var(--fi-blau)}

/* ---------- Buttons & Links ---------- */
.button,.link--button,.btn-primary,.formbuilder [type=submit]{
  background:var(--fi-blau) !important;color:#fff !important;
  border:0 !important;border-radius:8px !important;
  padding:.7rem 1.5rem;
  transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
  box-shadow:0 3px 10px rgba(0,84,166,.30);
}
.button:hover,.link--button:hover,.btn-primary:hover,
.button:focus-visible,.btn-primary:focus-visible{
  background:var(--fi-blau-dunkel) !important;color:#fff !important;
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,84,166,.40);
}
.btn-white-bordered{border-radius:8px;transition:all .2s ease}

/* ---------- Akkordeon (Startseite) ---------- */
.collapsible{
  border:1px solid #e3e8ef;border-radius:var(--fi-radius);
  margin-bottom:.75rem;overflow:hidden;background:#fff;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.collapsible:hover{border-color:var(--fi-blau);box-shadow:var(--fi-schatten)}
.collapsible__toggle{transition:background .2s ease}
.collapsible__toggle:hover{background:var(--fi-blau-hell)}
.collapsible h2{margin:0}

/* ---------- Telefon-Box ("Ihr direkter Kontakt") ---------- */
.widget__tel-contact{
  background:var(--fi-blau-hell);border-left:5px solid var(--fi-blau);
  border-radius:var(--fi-radius);box-shadow:var(--fi-schatten);
}
.widget__tel-contact h4{margin-top:0}
.widget__tel-contact-content{align-items:center}
.widget__tel-contact-phone a{color:var(--fi-blau);text-decoration:none}
.widget__tel-contact-phone a:hover{text-decoration:underline}

/* ---------- Mitglieder-/Termin-Tabellen (Widgets) ---------- */
.im-app .im-table{
  border-radius:var(--fi-radius);overflow:hidden;
  box-shadow:var(--fi-schatten);
}
.im-app .im-table tbody tr{transition:background .15s ease}
.im-app .im-field input:focus,.im-app .im-field select:focus{
  border-color:var(--fi-blau) !important;
  box-shadow:0 0 0 3px rgba(0,84,166,.18) !important;
}
.im-app .im-pager button{border-radius:8px;transition:all .2s ease}

/* ---------- Formulare (Kontakt) ---------- */
.form-control{
  border-radius:8px !important;border:1px solid #c9d2dd !important;
  padding:.65rem .9rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.form-control:focus{
  border-color:var(--fi-blau) !important;
  box-shadow:0 0 0 3px rgba(0,84,166,.18) !important;outline:none;
}

/* ---------- Footer ---------- */
.footer{border-top:4px solid var(--fi-blau)}
.footer a{transition:color .2s ease,opacity .2s ease}
.footer a:hover{color:#fff;opacity:.85;text-decoration:underline}
.footer__headline{position:relative;padding-bottom:.4em}
.footer__headline::after{
  content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;
  border-radius:2px;background:var(--fi-blau);
}

/* ---------- PDF-/Download-Karten & eRecht24-Siegel ---------- */
.erecht24-siegel img{border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* ---------- Sanfter Seiteneinstieg ---------- */
@media (prefers-reduced-motion:no-preference){
  main{animation:fiFadeIn .45s ease-out}
  @keyframes fiFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}


/* ---------- Seite "Die Innung" (uber-uns) ---------- */
.innung-text h2{font-size:1.6rem;text-transform:uppercase;margin:2.2rem 0 .8rem}
.innung-text h3{font-size:1.15rem;text-transform:none;margin:1.6rem 0 .6rem}
.innung-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 1.6rem}
.innung-karte{background:#fff;border:1px solid #e3e8ef;border-radius:var(--fi-radius);padding:1.1rem 1.25rem;box-shadow:var(--fi-schatten)}
.innung-karte h3{margin:0 0 .7rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--fi-blau)}
.innung-karte p{margin:0 0 .7rem;font-size:.95rem;line-height:1.5}
.innung-karte p:last-child{margin-bottom:0}
.innung-karte .rolle{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#8a939e}
.innung-karte small{color:#777}
.innung-checkliste{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px 24px}
.innung-checkliste li{position:relative;padding:.3rem 0 .3rem 2rem}
.innung-checkliste li p{margin:0}
.innung-checkliste li::before{content:"\2713";position:absolute;left:0;top:.35rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--fi-blau);color:#fff;font-size:.78rem;line-height:1.3rem;text-align:center}
.innung-cta{background:var(--fi-blau-hell);border-left:5px solid var(--fi-blau);border-radius:var(--fi-radius);padding:1.3rem 1.5rem;margin:1.8rem 0}
.innung-cta p{margin:0 0 1rem}

/* ---------- Seite "Ausbildung" ---------- */
.lead-text{font-size:1.15rem;font-weight:700;color:var(--fi-dunkel);line-height:1.5}
.info-badge{display:inline-block;background:#fff;border:1px solid #e3e8ef;border-radius:var(--fi-radius);padding:.65rem 1.2rem;box-shadow:var(--fi-schatten);margin:0 0 1.4rem}
.info-badge .rolle{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#8a939e}
.widget__download-content{border-radius:var(--fi-radius);overflow:hidden;box-shadow:var(--fi-schatten)}
.widget__download-content img{border-radius:0 !important}
.grid__second-column iframe{border-radius:var(--fi-radius);max-width:100%}

/* ---------- Keine Silbentrennung in Ueberschriften ---------- */
h1,h2,h3,h4,h5,h6{hyphens:manual;-webkit-hyphens:manual;word-break:normal;overflow-wrap:normal}

/* ---------- Video-Box (sichtbar auch vor Cookie-Zustimmung) ---------- */
.video-box{background:#fff;border:1px solid #e3e8ef;border-radius:var(--fi-radius);padding:1rem;box-shadow:var(--fi-schatten);margin-top:1.6rem}
.video-box h4{margin:.2rem 0 .9rem}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:var(--fi-blau-hell);border-radius:8px;overflow:hidden}
.video-wrap .video-hinweis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:1rem;font-size:.88rem;color:#3d5a7a}
.video-wrap iframe{position:absolute;inset:0;width:100% !important;height:100% !important;border:0;margin:0;border-radius:0}