/* ================================================
   USF – Unternehmer Service Franken
   Globale Stylesheet-Datei
   ================================================ */

/* ---------- Variablen & Reset ---------- */
:root{
  --primary:#c1121f;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --soft:#f6f6f6;
  --border:#e5e7eb;
  --focus:#0ea5e9;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* ---------- Layout Container ---------- */
.container{
  max-width:1120px;
  margin-inline:auto;
  padding:0 16px;
}

/* ---------- Topbar ---------- */
.topbar{
  background:#111;
  color:#fff;
  font-size:14px;
}
.topbar .container{
  display:flex;
  gap:16px;
  align-items:center;
  padding:8px 16px;
}
.topbar a{ color:#fff; text-decoration:none; opacity:.9; }
.topbar .addr{ margin-left:auto; opacity:.7; }

/* ---------- Header & Navigation ---------- */
.header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
  flex-wrap:nowrap;            /* Header selbst darf nicht umbrechen */
}

.brand .logo{
  width:40px;
  height:40px;
  border-radius:50%;
  /* alte Platzhalter-Styles entfernen/überschreiben: */
  border:0;                 /* optional: wenn kein Rahmen gewünscht */
  background: none;         /* Platzhalter-Background entfernen */

  /* Logo als Hintergrundbild: */
  background-image: url('/logo.png');
  background-size: contain; /* Logo vollständig einpassen */
  background-repeat: no-repeat;
  background-position: center;
  display:block;
}

.brand-text small{ display:block; color:var(--muted); margin-top:-4px; }

/* NAV – kein Umbruch, Button immer rechts */
.nav{
  display:flex; align-items:center; gap:18px;
  flex-wrap:nowrap;             /* verhindert Zeilenumbruch */
  min-width:0;                  /* erlaubt Schrumpfen innerhalb Flex-Parent */
  flex:1 1 auto;                /* Nav darf Platz nutzen/schrumpfen */
  overflow-x:auto;              /* wenn’s eng wird: horizontal scrollen */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;         /* (optional) Firefox: Scrollbar ausblenden */
}
.nav::-webkit-scrollbar{ display:none; } /* (optional) WebKit: Scrollbar ausblenden */

.nav a{
  text-decoration:none; color:inherit; white-space:nowrap;
  flex:0 0 auto; order:1; position:relative;
}
.nav a.active{
  font-weight:600;
}
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px;
  height:2px; background:var(--primary); border-radius:2px;
}

/* CTA-Button in der Nav */
.nav .btn{
  order:2;                 /* Button immer ans Ende */
  margin-left:auto;        /* schiebt ihn ganz nach rechts */
  flex:0 0 auto;           /* nicht schrumpfen */
}

/* ---------- Buttons ---------- */
.btn{
  background:var(--primary); color:#fff;
  padding:10px 14px; border-radius:12px;
  text-decoration:none; font-weight:600;
  display:inline-block;
  transition:transform .06s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-outline{
  border:1px solid #ddd; padding:10px 14px; border-radius:12px;
  text-decoration:none; color:inherit;
}

/* ---------- Hero Section ---------- */
.hero{
  background:linear-gradient(180deg,#fff,#fafafa);
  border-block:1px solid #eee;
}
.hero-inner{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:32px; padding:64px 0;
}
.hero h1{ font-size:44px; line-height:1.1; margin:0 0 16px; }
.hero p{ color:var(--muted); font-size:18px; }
.hero .actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.accent{ color:var(--primary); }
.hero-art{
  font-size:64px; display:flex; align-items:center; justify-content:center;
  background:#f2f2f2; border-radius:24px; min-height:240px;
}

/* ---------- Cards ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; padding:56px 0;
}
.card{
  border:1px solid #eee; border-radius:24px; padding:20px; background:#fff;
}
.card h3{ margin:6px 0 10px; }
.card p{ color:var(--muted); }
.more{ display:inline-block; margin-top:12px; color:var(--primary); text-decoration:none; font-weight:600; }

/* ---------- Zitat ---------- */
.quote{ padding:24px 0 56px; }
.quote blockquote{
  padding:24px; border:1px solid #eee; border-radius:24px; background:#fff; font-size:20px;
}

/* ---------- Kontaktbereich ---------- */
.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-bottom:72px;
}
.contact .form{
  border:1px solid #eee; border-radius:24px; padding:20px; display:grid; gap:12px; background:#fff;
}
.form label{ display:grid; gap:6px; font-weight:600; }
input,textarea{
  font:inherit; padding:12px 12px; border:1px solid #ddd; border-radius:12px; width:100%;
}
.consent{ font-weight:400; color:var(--muted); display:flex; align-items:center; gap:8px; }
.alert{ border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:14px; }
.alert.ok{ background:#e9f8ee; border:1px solid #bfe6cb; color:#135a2c; }
.alert.error{ background:#fff4f4; border:1px solid #ffd4d4; color:#7a1111; }

/* ---------- Footer ---------- */
.footer{ background:#111; color:#bbb; margin-top:auto; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px; }

/* ---------- Utilities & Accessibility ---------- */
.muted{ color:var(--muted); }
a:hover{ opacity:.85; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }

/* Skiplink */
.skiplink{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.skiplink:focus{
  position:static; width:auto; height:auto; display:inline-block;
  padding:8px 12px; background:#000; color:#fff; border-radius:8px; margin:8px;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:14px; color:var(--muted); margin-bottom:16px; }
.breadcrumbs a{ color:inherit; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

/* ---------- Timeline (Lebensphasen) ---------- */
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:12px;
}
.t-item{
  position:relative; border:1px solid var(--border); border-radius:16px;
  padding:16px; background:#fff;
}
.t-dot{
  position:absolute; top:-8px; left:16px; width:16px; height:16px;
  border-radius:50%; background:var(--primary);
}
@media (max-width:900px){ .timeline{ grid-template-columns:1fr; } }

/* ---------- Vergleichsmatrix ---------- */
.matrix{
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.m-row{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); }
.m-row > div{ padding:12px; border-bottom:1px solid var(--border); }
.m-head{ background:#fafafa; font-weight:600; }
.m-row:last-child > div{ border-bottom:none; }
@media (max-width:900px){
  .m-row{ grid-template-columns:1fr 1fr; }
  .m-head{ display:none; }
}

/* ---------- Prozess-Schritte ---------- */
.steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:8px;
}
.step{
  border:1px solid var(--border); border-radius:16px; padding:16px; background:#fff;
}
.step-num{
  width:28px; height:28px; border-radius:50%;
  background:#f2f2f2; display:flex; align-items:center; justify-content:center;
  font-weight:700; margin-bottom:8px;
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }

/* ---------- FAQ ---------- */
.faq{
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:#fff; margin-bottom:8px;
}
.faq > summary{ cursor:pointer; font-weight:600; list-style:none; }
.faq[open]{ border-color:#ddd; }

/* ---------- Bilder ---------- */
img{ max-width:100%; height:auto; border-radius:12px; }

/* ---------- Auswahl-Hintergrund ---------- */
::selection{ background:rgba(193,18,31,.18); color:inherit; }

/* ---------- Responsive Anpassungen ---------- */
@media (max-width:1100px){
  .nav{ gap:12px; }
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .nav{ gap:10px; }
}