/* gemeinsam.css — laedt auf JEDER Seite als letzte Datei.
   Drei Aufgaben: die eine Kopfzeile (teile/kopf.html), ein einziges Orange und die
   Mindestwerte fuer Handys (Tippziele, Schriftgroesse). Loest mobil-fix.css ab.

   ⚠️ EIN ORANGE: #F26522. Am 23.09.2026 vom User so entschieden („Buttons und Texte
      muessen alle in Barzik orange sein und nicht dunklere verschiedene orange Toene").
      Das dunklere Orange aus mobil-fix.css ist damit raus, auch als Hover. Gemessen
      und bewusst in Kauf genommen: weiss auf #F26522 = 3,15:1, #F26522 auf Papier
      #F4F1EC = 2,80:1 (WCAG AA verlangt 4,5:1 fuer normalen Text). Wer hier wieder
      abdunkelt, kippt eine Nutzerentscheidung. */

/* ── 1. KOPFZEILE ────────────────────────────────────────────────────────────── */
/* Drei Spalten 1fr · auto · 1fr: die Navigation steht damit genau in der Mitte,
   egal wie breit Marke und Knopf sind. Mit flex + margin-left:auto stand sie
   vorher um die halbe Breitendifferenz nach links verschoben. */
/* Klebt auf JEDER Seite (Wunsch 23.09.2026). Deckend statt Glas: backdrop-filter auf einer
   dauerhaft sichtbaren Leiste ruckelt beim Scrollen (Memory backdrop-filter-sticky-scroll-jank).
   Die Trennlinie kommt erst beim Scrollen (kopf.js setzt .gescrollt), damit der Hero oben
   nahtlos in die Leiste uebergeht. */
.kopf{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:24px;height:72px;padding:0 var(--pad,clamp(20px,4vw,64px));color:#fff;
  background:#16171A;border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.kopf.gescrollt{border-bottom-color:rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.28)}
/* Sprungziele nicht unter der Leiste verstecken */
html{scroll-padding-top:72px}
.kopf .brand{justify-self:start;display:inline-flex;align-items:center;min-height:44px;
  font-size:clamp(20px,1.5vw,25px);font-weight:700;letter-spacing:-.035em;color:#fff;text-decoration:none}
.kopf .brand em{font-style:normal;flex:none;width:26px;height:26px;margin-right:12px;border:0;
  background:url("logo-mark-dunkel.svg?v=2cac0f62b1") center/contain no-repeat}
.kopf .brand em::after{content:none}
.kopf .brand i{font-style:normal;color:#F26522}
.kopfNav{display:flex;align-items:center;gap:clamp(22px,2.6vw,44px)}
.kopfNav a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.74);text-decoration:none;white-space:nowrap;transition:color .3s ease}
.kopfNav a:hover{color:#fff}
.kopfRechts{justify-self:end;display:flex;align-items:center;gap:10px}
.kopf .cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;margin:0;
  background:#F26522;color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;white-space:nowrap;text-decoration:none}
.kopf .cta .kurz{display:none}
.menu{display:none;width:48px;height:48px;border:1px solid rgba(255,255,255,.26);background:transparent;
  color:#fff;cursor:pointer;padding:0;place-items:center}
.menu i,.menu i::before,.menu i::after{display:block;width:18px;height:2px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease}
.menu i{position:relative}
.menu i::before,.menu i::after{content:"";position:absolute;left:0}
.menu i::before{top:-6px}
.menu i::after{top:6px}
.menu[aria-expanded="true"] i{background:transparent}
.menu[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.kopfMenu{position:absolute;left:0;right:0;top:100%;background:#16171A;border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.14);padding:8px var(--pad,20px) 20px;display:flex;flex-direction:column;
  box-shadow:0 24px 40px rgba(0,0,0,.4)}
/* Ueber die ganze Hoehe (24.09.2026): als Streifen endete das Menue nach 325 px, darunter schaute die Seite
   halb verdeckt hervor und sah abgeschnitten aus. kopf.js sperrt dabei das Scrollen der Seite. */
.kopfMenu{height:calc(100vh - 72px);height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
html.menu-offen,html.menu-offen body{overflow:hidden}
.kopfMenu[hidden]{display:none}
.kopfMenu a{display:flex;align-items:center;min-height:52px;font-size:17px;font-weight:600;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}
.kopfMenu a.cta{margin-top:16px;justify-content:center;border:0;min-height:52px;font-size:15px}
/* Die lange Knopfbeschriftung passt nur, solange beide Seitenspalten breit genug sind. */
@media(max-width:1180px){.kopf .cta .lang{display:none}.kopf .cta .kurz{display:inline}}
@media(max-width:900px){.kopfNav{display:none}.menu{display:grid}.kopf{grid-template-columns:minmax(0,1fr) auto;height:72px}}
/* Handy: der kurze Analyse-Knopf bleibt in der klebenden Leiste. Im ersten Bildschirm
   (390 x 844) liegt der Hero-Knopf sonst unter der Kante (gemessen 866 px), und ohne
   diesen gaebe es dort keinen einzigen Weg zur Analyse. Nur unter 360 px fehlt der Platz. */
/* ⚠️ `:root .kopf .kopfRechts>.cta` (0,4,0), damit diese Handy-Regel die gemeinsame Knopf-Regel
   `:root .kopf .cta` (0,3,0) aus 2b schlaegt, die WEITER UNTEN steht. Mit gleicher Spezifitaet
   gewann 2b, und bei 360/375 px deckte der grosse Knopf die Marke zu (Review 23.09.2026). */
@media(max-width:420px){:root .kopf .kopfRechts>.cta{min-height:44px;padding:0 14px;font-size:13px;letter-spacing:0;gap:6px}
  .kopf{column-gap:12px}.kopf .brand{font-size:20px}.kopf .brand em{margin-right:9px}}
@media(max-width:374px){:root .kopf .kopfRechts>.cta{padding:0 10px}}
@media(max-width:359px){.kopfRechts>.cta{display:none}}
@media(min-width:901px){.kopfMenu{display:none!important}}
/* Analyse und Danke: der Knopf wuerde auf die Seite zeigen, auf der man schon ist. */
.kopf.funnel .cta{display:none}

/* ── 1b. EINE INHALTSKANTE ───────────────────────────────────────────────────── */
/* Bis ~1600 px Fensterbreite lag alles auf dem Seitenrand. Darueber gab es drei Kanten
   (gemessen 23.09.2026 bei 1920 px): Kopf und Hero bei 64, Eyebrow und Unterzeile am
   Sektionsrand bei 77, Ueberschrift und Inhalt im zentrierten 1520er-Rahmen bei 200, der
   Problem-Block bei 277. Jetzt zentriert der AEUSSERE Abstand, und alles innen beginnt an
   derselben Kante: der Seitenrand, sobald das Fenster breiter ist als 1520 px plus Rand,
   die halbe Differenz. Prozent im Innen-/Aussenabstand bezieht sich auf die Breite des
   umgebenden Blocks, hier also immer die volle Seitenbreite. */
.kopf,.foot-site,.sec,.sprint,.case,.works,.offer,.why,.faq,.cHero,.doc,.aWrap,.tHero,.bwrap{
  padding-left:max(clamp(24px,4vw,64px),calc((100% - 1520px) / 2));
  padding-right:max(clamp(24px,4vw,64px),calc((100% - 1520px) / 2))}
.hero .wrap,.hero .foot{
  margin-left:max(clamp(24px,4vw,64px),calc((100% - 1520px) / 2));
  margin-right:max(clamp(24px,4vw,64px),calc((100% - 1520px) / 2))}
/* Der Problem-Block zentrierte sich selbst (max-width inkl. Rand), Recht und Analyse auf
   1240 px: beides wuerde eine eigene Kante erzeugen. */
.sec{max-width:none;margin-left:0;margin-right:0}
.doc__in,.aGrid{max-width:none}

/* ── 2. EIN ORANGE ───────────────────────────────────────────────────────────── */
/* Gefuellte Knoepfe sind orange, auch die frueher dunklen auf hellem Grund. Hover
   bleibt im selben Ton: Schatten und Pfeilbewegung statt einer zweiten Farbe. */
.btn:not(.ghost),a.btn:not(.ghost),button.btn,.send,.tagA{background-color:#F26522;color:#fff}
.btn:not(.ghost),.kopf .cta,.send{transition:box-shadow .3s ease,transform .3s ease}
.btn:not(.ghost):not(:disabled):hover,.kopf .cta:hover,.send:not(:disabled):hover{background-color:#F26522;color:#fff;
  box-shadow:0 10px 26px rgba(242,101,34,.32);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.btn:not(.ghost):not(:disabled):hover,.kopf .cta:hover,.send:hover{transform:none}}

/* ── 2b. EIN KNOPF ───────────────────────────────────────────────────────────── */
/* Gemessen 23.09.2026: sechs Schriftgroessen (13 bis 15,5 px), Hoehen 44 bis 74 px, Sperrung nur
   in der Leiste, Pfeil einmal 10 px abgesetzt (eigenes Flex-Kind), einmal nur ein schmales
   Leerzeichen entfernt. Rueckmeldung: „sieht beides doof aus“. Jetzt ein Knopf: 15 px, keine
   Sperrung, der Pfeil als eigenes Element mit festem Abstand. `:root` davor, weil die Sektionen
   ihre Knoepfe spezifischer stylen (.sprint .btn, .caseFoot .btn …) und hier gewinnen muessen. */
:root .btn,:root .kopf .cta{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:0;
  line-height:1.25;gap:.55em;text-decoration:none}
:root .btn{min-height:52px;padding:0 26px}
:root .kopf .cta{min-height:52px;padding:0 26px}
/* Leisten-Knopf tritt zurueck, solange ein Analyse-Knopf im Inhalt sichtbar ist (kopf.js .cta-aus).
   visibility statt display: die Spalte behaelt ihre Breite, die Navigation springt nicht. */
.kopfRechts>.cta{transition:opacity .25s ease,visibility .25s ease,box-shadow .3s ease,transform .3s ease}
.kopf.cta-aus .kopfRechts>.cta{opacity:0;visibility:hidden}
.pfeil{display:inline-block;flex:none;transition:transform .3s ease}
a:hover .pfeil,button:not(:disabled):hover .pfeil{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.pfeil{transition:none}a:hover .pfeil,button:hover .pfeil{transform:none}}
/* Handy: volle Breite statt ueberstehen. Bei 320 px ragten zwei Knoepfe mit white-space:nowrap
   ueber die Inhaltskante (304 und 318 px bei 296 px Kante). */
@media(max-width:560px){:root .btn{width:100%;white-space:normal;text-align:center;padding:12px 20px}}

/* ── 3. TIPPZIELE ────────────────────────────────────────────────────────────── */
/* Echte Hoehe, kein ::after-Trick: ein unsichtbares Trefferfeld vergroessert das
   Ziel fuer den Finger, aber nicht fuer die Messung. */
.btn,a.btn,button.btn,.send,.all,.back,.alt,.up,.go,.footBar nav a,.qa summary,.footCol a,
a[href^="mailto:"],a[href^="tel:"],.liveLink,.backLink a,.doc__toc a,.doc__sib a,.yourSite a{
  min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.btn,a.btn,button.btn,.send{justify-content:center}
.footMark{min-height:44px}
.card input,.f input,input[type="text"],input[type="email"],input[type="tel"],textarea{min-height:44px}

/* ── 4. MINDESTSCHRIFTGROESSE 13px ───────────────────────────────────────────── */
/* ⚠️ Nur die kleinen Etiketten `.step .n` und `.point .n`, NIE `.n` pauschal: `.n` sind
   auch die grossen Kontur-Ziffern 01–03 (Problem, Analyse, Warum, Ausgangslage). Die
   Pauschalregel aus mobil-fix.css hatte sie vom 22.09. bis 23.09. auf 13 px geschrumpft. */
.eyebrow,.step .n,.point .n,.idx,.tag,.tagA,.lab,.note,.small,.svc,.fields,.place,.up,.cap,.who span,
.role,.fact span,.card .small,.card .note,.form .lab,.footBar span,.caseFoot span,
.lbl,.scope h3,.get h3,.foot-site h4,.trust p,.metaList dt,.res b,.nextMeta .who,.qa summary b,
.stance cite span,.yourSite span,.backLink,.backLink a{
  font-size:13px!important;line-height:1.35}
.fact strong{font-size:clamp(22px,2.4vw,42px)!important}

/* ── 6. HANDY-RAHMEN ─────────────────────────────────────────────────────────── */
/* Ein Rahmen fuer alle drei Stellen (Startseite Speed4You, Weitere Arbeiten, Fallseiten-Kopf).
   Vorher 78–146 px breit mit 6-px-Balken: eine 390-px-Handyseite stand auf gut einem Drittel
   ihrer Groesse da und war nicht lesbar, der schwarze Rand verschwand auf dunklem Grund
   (Rueckmeldung 23.09.2026: „die Handyscreens sehen doof aus“). Jetzt: schmale gleichmaessige
   Einfassung, heller Haarrand gegen dunklen Grund, weicher Schatten. Das Bild behaelt genau das
   Seitenverhaeltnis der Aufnahme (390 x 844), damit nichts angeschnitten wird. */
.phone,.mob,.heroPhone,.shotHandy{height:auto;aspect-ratio:auto;border:0;overflow:visible;
  padding:clamp(5px,.55vw,8px);border-radius:clamp(22px,2.3vw,34px);background:#0B0C0D;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),
    0 34px 60px -14px rgba(0,0,0,.55),0 12px 24px rgba(0,0,0,.22)}
.phone img,.heroPhone img,.shotHandy img,.mob .screen{display:block;width:100%;height:auto;aspect-ratio:390/844;
  object-fit:cover;object-position:top;border-radius:clamp(17px,1.8vw,26px);overflow:hidden;background:#17181B}
.mob .screen img{height:100%}

/* 7. Tastatur (23.09.2026): Sprungmarke als erstes Ziel, sichtbarer Fokus überall im einen Orange */
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:#fff;color:#16171A;padding:12px 16px;font-weight:700;text-decoration:none;border-radius:6px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid #F26522;outline-offset:3px}

/* 8. Bewegung reduzieren (23.09.2026 gemessen: Startseite 31, Projektseite 8 Elemente blendeten trotz
   „reduce“ weiter ein). Einblenden bleibt als Zustand, nur ohne Weg; die Projekt-Abschnitte stehen sofort. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}