/* ==========================================================
   Stefanie Balkenhol – Website
   Gemeinsames Stylesheet für alle Seiten
   ========================================================== */

/* ---- Lokale Schriftarten (selbst gehostet, kein externer Aufruf an Google) ---- */
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Grundlagen ---- */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .font-display { font-family: 'Fraunces', serif; }
section, header, h1, h2, h3, h4, [id] { scroll-margin-top: 140px; }
:focus-visible { outline: 2px solid #b3904f; outline-offset: 3px; }

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

/* ---- Punktraster-Hintergrund (Hero, Beglaubigungen-Box) ---- */
.seal-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---- Header: großes Logo, das beim Scrollen schrumpft ---- */
#top { transition: box-shadow 0.3s ease; }
#top.scrolled { box-shadow: 0 1px 2px rgba(6,48,77,0.06); }

.header-bar {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  transition: padding 0.3s ease;
}
#top.scrolled .header-bar {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.site-logo {
  height: 4.75rem;
  width: 4.75rem;
  transition: height 0.3s ease, width 0.3s ease;
}
#top.scrolled .site-logo {
  height: 2.75rem;
  width: 2.75rem;
}

.logo-title {
  font-size: 1.25rem;
  transition: font-size 0.3s ease;
}
#top.scrolled .logo-title { font-size: 1.05rem; }

.logo-subtitle {
  font-size: 0.8rem;
  transition: font-size 0.3s ease;
}
#top.scrolled .logo-subtitle { font-size: 0.68rem; }

/* ---- Sprachauswahl-Dropdown ---- */
.lang-dropdown { position: relative; }
.fi {
  border-radius: 2px;
  vertical-align: -0.1em;
}

/* ---- Kombi-Flagge Englisch (UK/USA, diagonal geteilt) ---- */
.fi-combo-en {
  position: relative;
  display: inline-block;
  width: 1.33em;
  height: 1em;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: -0.1em;
}
.fi-combo-en .fi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.fi-combo-en .fi-us { clip-path: polygon(0 0, 100% 0, 0 100%); }
.fi-combo-en .fi-gb { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---- Datei-Upload (Kontaktformular) ---- */
.dropzone {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dropzone.drag-over {
  border-color: #b3904f;
  background-color: #fbf7ef;
}