/* Hausschrift inotec Sans / inotec Sans Text – schrittweise Umstellung der Website.
   Schriftdateien liegen in schriften/ (beim Bauen aus ../Schrift/font kopiert); in der Ein-Datei-Vorschau werden sie eingebettet. */
@font-face { font-family: 'inotec Sans'; src: url(../schriften/inotecSans-Light.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'inotec Sans'; src: url(../schriften/inotecSans-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'inotec Sans Text'; src: url(../schriften/inotecSansTextVF.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }   /* variabel: alle Stärken 300–700 */

/* Schritt 1: lachsfarbene Überschriften (Labels mit Dreieck, Footer-Überschriften) in inotec Sans Bold */
.eyebrow, footer.site h3 { font-family: 'inotec Sans', var(--font, Inter), system-ui, sans-serif; font-weight: 700; }

/* Schritt 2: große Überschriften der Startseite (Hero, Claim „Think it. …“, Abschnittstitel) in inotec Sans Bold.
   Schriftgrößen unverändert (Versalhöhe ≈ 4 % kleiner als Inter, Laufbreite 6–15 % größer); negative Laufweite von Inter
   (−0,035 … −0,045 em) aufgehoben, da inotec Sans eigene optische Abstände hat. Unterseiten folgen gesondert. */
.page[data-page=start] h1, .page[data-page=start] h2 { font-family: 'inotec Sans', var(--font, Inter), system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }

/* Schritt 3: Fließtexte der Startseite (Absätze, Listen, Links, Knöpfe – nicht Überschriften und Labels) in inotec Sans Text.
   Variable Schrift (300–700): Gewichte wie bisher (200 → 300 Light, da kleinste Stärke), Größen unverändert.
   Laufweite +5 % ist in inotec Sans Text eingebaut. Header, Footer und Unterseiten folgen gesondert.
   :where() hält die Priorität niedrig, damit gezielte Regeln (z. B. Schritt 4) greifen. */
.page[data-page=start] :where(*:not(h1, h2, h3, h4, .eyebrow):not(:is(h1, h2, h3, h4, .eyebrow) *)) { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; }

/* Schritt 4: lachsfarbene Nummern 01–07 der Leistungsliste und Kürzel der Listen (ISO 13485 …, MDR / IVDR, CE …) auf der Startseite
   in inotec Sans Light, etwas größer (vorher 14 px, Stärke 600/700) */
.page[data-page=start] .navlist a b, .page[data-page=start] .section li b { font-family: 'inotec Sans', var(--font, Inter), system-ui, sans-serif; font-weight: 300; font-size: 18px; }   /* vorher 16 px */

/* Kürzel der Normenlisten (ISO 13485 …, MDR / IVDR, CE, UDI, PMS) in inotec Sans Bold statt Light (Nutzer: „sieht besser aus“);
   Nummern 01–07 der Leistungsliste bleiben Light. */
.page[data-page=start] .section li b { font-weight: 700; }

/* Footer: lachsfarbene Spaltenüberschriften (Leistungen, Unternehmen, Rechtliches) größer – 16 px statt 13 px, inotec Sans Bold */
footer.site h3 { font-size: 16px; margin-bottom: 18px; }
/* Footer: Linklisten unter den Spaltenüberschriften in inotec Sans Text (vorher Inter ExtraLight 200, 15 px – wirkte „zerfallen“);
   Light 300 = leichtester Schnitt, Größe unverändert. */
footer.site a:not(.more) { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 300; font-size: 16px; }   /* +1 px */
/* Footer: Slogan in inotec Sans Bold, Adresse/Telefon, „Anfahrt“, Copyright und Platzhalter in inotec Sans Text – je 1–2 px größer */
footer.site .fbrand .fmarke p { font-family: 'inotec Sans', var(--font, Inter), system-ui, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0; }   /* vorher 22 px */
footer.site .fbrand .addr p { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 300; font-size: 16px; }              /* vorher 15 px */
footer.site .fbrand .addr a.more { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-size: 14px; }                         /* vorher 13 px */
footer.site .copy, footer.site .eu { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 300; font-size: 13px; }   /* vorher 12 px */


/* ---------- Ghost-Links („Alle Leistungen →“, „Anfahrt“): Variante F „Button“ (Nutzer-Entscheidung 18.10.) ----------
   19.10. abends (Nutzer): auch die freien Links unter dem Inhalt der Unterseiten („Weiter zu …“, „Zum Qualitätsmanagement“ …); Links in Blöcken bleiben Textlinks. Ebenso Hero-Knopf „Ihre Anfrage“ und Kontakt-Knopf „Sprechen Sie uns an“ der Startseite (.hero a.btn, .section.last a.btn, vorher gefüllt), der Formular-Knopf „Absenden“ und „Anfahrt in Google Maps“ und „LinkedIn“ (Kontakt, .kontakt-info a.more), leap-up.com (Über uns, a.more.netz-link), „Mehr zum geförderten Vorhaben“ (Qualität › Aktuelles, .tile.aktuell > a.more) und der Kontaktband-Knopf „Sprechen Sie uns an“ (.ctaband .btn.ghost, Pfeil „→“ aus den Texten entfernt).
   Pill-Umriss mit Text + Impuls-Pfeil (Maske im ::after). Überfahren: zarte Füllung, Lichtstreifen läuft durch die Linie,
   dazu ein kleiner Lichtpunkt (::before, liegt über dem Symbol) entlang der Zacke bis in die Pfeilspitze. */
.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn { border: 1.4px solid rgba(255,138,102,.8); border-radius: 999px; padding: 14px 22px 14px 26px; gap: 16px; font-family: 'inotec Sans Text', var(--font, Inter), sans-serif;
  font-weight: 600; letter-spacing: .1em; color: #fff; transition: background .35s, border-color .35s; }
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn)::after { content: ""; width: 48px; height: 16px; flex: none; color: var(--color-coral-amber); background: linear-gradient(90deg, currentColor 0 40%, #fff 50%, currentColor 60% 100%) 130% 0 / 320% 100% no-repeat, currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M1 9H14L17 2L21 15L23.5 9H46M40 3.5L46 9L40 14.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M1 9H14L17 2L21 15L23.5 9H46M40 3.5L46 9L40 14.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn):hover { color: #fff; gap: 16px; background: rgba(255,138,102,.14); border-color: var(--color-coral-amber); }
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn):hover::after { animation: more-lauf 1.3s linear 1 both; }
@keyframes more-lauf { from { background-position: 78.4% 0, 0 0; } to { background-position: 21.6% 0, 0 0; } }   /* Streifenmitte x = −6 → 54 px, gleichmäßig */
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn) { position: relative; }
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn)::before { content: ""; position: absolute; right: 22px; top: 50%; width: 48px; height: 16px; margin-top: -8px;
  pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0 1.5px, rgba(255,255,255,.55) 2.3px, rgba(255,255,255,0) 4px) -3px 5px / 8px 8px no-repeat; }
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn):is(:hover, :focus-visible)::before { animation: more-punkt 1.3s linear 1 both; }
:is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn):focus-visible::after { animation: more-lauf 1.3s linear 1 both; }
/* Punkt folgt der Impulslinie M1 9 H14 L17 2 L21 15 L23.5 9 H46 (Zeit ∝ x, im Takt mit dem Streifen); Lage = Punkt − 4 px */
@keyframes more-punkt {
  0%    { background-position: -3px 5px; opacity: 0; }
  11.7% { background-position: -3px 5px; opacity: 0; }
  16%   { opacity: 1; }
  33.3% { background-position: 10px 5px; }
  38.3% { background-position: 13px -2px; }
  45%   { background-position: 17px 11px; }
  49.2% { background-position: 19.5px 5px; }
  84%   { opacity: 1; }
  86.7% { background-position: 42px 5px; }
  100%  { background-position: 42px 5px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn)::before,
  :is(.page[data-page=start] .more, footer.site .fbrand .addr a.more, .page.dashboard-glas .more:not(.tile .more), .page.dashboard-glas .ctaband .btn.ghost, .page.dashboard-glas .tile.aktuell > a.more, .page.dashboard-glas .tile.wide > a.more.netz-link, .page.dashboard-glas .kontakt-form button.btn, .page.dashboard-glas .kontakt-info a.more, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn)::after { animation: none !important; }
}

/* Header-Navigation (18.10.): inotec Sans Text SemiBold 600, Versalien, Laufweite 0,06 em (vorher Inter 600, 0,025 em);
   Dropdown-Einträge inotec Sans Text normal. Mobilmenü noch Inter. */
header nav > a, header .dd > a, header .burger { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 600; letter-spacing: .06em; }
header .dd li a { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; }
/* Menüpunkte 15 px (Test 18.10., vorher 14 px). inotec Sans Text läuft breiter als Inter → Abstände 22 px (vorher 30 px),
   sonst wird „Ihre Anfrage“ rechts abgeschnitten; bis 1320 px reicht der Platz nicht → Burger-Menü schon ab ≤ 1320 px (vorher ≤ 1220 px). */
header nav > a:not(.btn), header .dd > a { font-size: 15px; }
header nav { gap: 22px; }
header.scrolled nav .btn { font-size: 14px; }   /* gescrollt nicht mehr auf 13 px verkleinern */
/* 19.10.: Knopf „Ihre Anfrage“ aus der Kopfzeile entfernt → Navigation 665 px breit; neu gemessen: 34 px Luft zum Logo bei 1113 px → volle Navigation ab 1120 px (41 px Luft), darunter Burger (vorher ≤ 1320 px) */
@media (max-width: 1119px) { header nav > a:not(.btn), header .dd, header .lang { display: none; } header .burger { display: block; } }
/* inotec.css (V2.6, unverändert) blendet bis 1220 px die Navigation aus und das Burger-Menü ein → hier für 1120–1220 px zurücknehmen */
@media (min-width: 1120px) and (max-width: 1220px) { header nav > a:not(.btn), header .dd, header .lang { display: block; } header .burger { display: none; } }

/* Mobilmenü (18.10.): inotec Sans Text statt Inter; Links Regular 30 px ohne negative Laufweite (war für Inter),
   Zwischenüberschriften und „Schließen“ wie die Kopfnavigation (600, Versalien, 0,06 em) */
.mobile a:not(.btn) { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 400; letter-spacing: 0; }
.mobile small, .mclose, .mobile .btn { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 600; letter-spacing: .06em; }
/* inotec Sans Text läuft breiter: „Qualitätsmanagement“ (30 px ≈ 340 px) ragte auf 360-px-Handys 12 px über den Rand → auf schmalen Geräten mitschrumpfen */
.mobile a:not(.btn) { font-size: min(30px, 7.8vw); }
header .dd li a { font-size: 15px; }   /* Dropdown-Einträge wie die Menüpunkte (vorher 14 px) */

/* Unterseiten (18.10.): alle übrigen Inhalte in den Hausschriften – wie Startseite (Schritt 2/3).
   Zwischen- und Kacheltitel (h2–h4, .tt, .tiles-h, Kontaktband) in inotec Sans Bold, Laufweite 0 (vorher Inter 400, −0,02 … −0,04 em);
   alles andere in inotec Sans Text (Gewichte wie bisher, 200 → 300 Light). Prozess-Kreis hat eigene Regeln (css/prozess.css).
   Fließtext-Regel mit :where() → Priorität 0, gezielte Regeln greifen weiter. */
.page:not([data-page=start]) :is(h2, h3, h4, .tt, .tiles-h):not(.prozess *) { font-family: 'inotec Sans', var(--font, Inter), system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
:where(.page:not([data-page=start])) :where(*:not(h1, h2, h3, h4, .eyebrow, .tt, .tiles-h):not(:is(h1, h2, h3, h4, .eyebrow, .tt, .tiles-h) *)) { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; }
#cform :is(input[type], textarea, select, button, label) {   /* [type] nötig: alte Regel #cform input[type=text] ist stärker */
   font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; }
/* Kontaktband-Knopf der Unterseiten wie .more als Zeile mit Pfeil daneben (.btn war block/inline-block) */
.page.dashboard-glas .ctaband .btn.ghost { display: inline-flex; align-items: center; }
/* Formular-Knopf „Absenden“ (Kontakt) als Variante F (19.10. abends, Nutzer): war gefüllt (#0E6F86) → transparent, Zeile mit Impuls-Pfeil */
.page.dashboard-glas .kontakt-form button.btn, .page[data-page=start] .hero a.btn, .page[data-page=start] .section.last a.btn { display: inline-flex; align-items: center; background: transparent; font-size: 14px; line-height: 1.2; text-transform: uppercase; cursor: pointer; }
/* Versteckter Verlauf-Schalter (19.10. abends): „©“ im Footer sieht aus wie Text, nur der Mauszeiger verrät nichts */
footer.site .verlauf-schalter { cursor: default; -webkit-user-select: none; user-select: none; }