/* FairCompass – Seite im Stil eines Messestands: Markise, Standblende, Tresen. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(schrift/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(schrift/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(schrift/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(schrift/barlow-latin-600-normal.woff2) format("woff2"); }

:root {
  --marine: #1F3A5F;
  --tief: #142840;
  --signal: #E8731A;
  --signal-dunkel: #B9560C;
  --halle: #EEF2F6;
  --weiss: #FFFFFF;
  --text: #1A2433;
  --leise: #556275;
  --linie: #D3DBE5;
  --schmal: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --normal: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--halle); color: var(--text); font: 18px/1.55 var(--normal); }
img { max-width: 100%; }
a { color: var(--marine); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.breite { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Markise und Standblende ---------- */
.markise {
  height: 30px;
  background: repeating-linear-gradient(90deg, var(--signal) 0 56px, var(--weiss) 56px 112px);
  -webkit-mask: radial-gradient(28px 14px at 28px 16px, #000 98%, transparent) 0 0 / 56px 30px repeat-x,
                linear-gradient(#000 0 0) 0 0 / 100% 16px no-repeat;
          mask: radial-gradient(28px 14px at 28px 16px, #000 98%, transparent) 0 0 / 56px 30px repeat-x,
                linear-gradient(#000 0 0) 0 0 / 100% 16px no-repeat;
  position: relative; z-index: 2; margin-bottom: -14px;
}
.blende { background: var(--marine); color: var(--weiss); padding: 40px 0 34px; border-bottom: 10px solid var(--tief); }
.blende.klein { padding: 26px 0 18px; }
.marke { display: inline-flex; align-items: center; gap: 12px; color: var(--weiss); text-decoration: none;
  font: 700 26px/1 var(--schmal); letter-spacing: .01em; }
.marke img { border-radius: 9px; }
.blende h1 { font: 700 clamp(46px, 8vw, 92px)/.92 var(--schmal); margin: 26px 0 14px; letter-spacing: -.005em; max-width: 17ch; }
.blende .zusage { font-size: clamp(19px, 2.2vw, 23px); max-width: 34em; margin: 0; color: #DCE5F0; }
.oben { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.oben nav a { color: #DCE5F0; text-decoration: none; margin-left: 22px; font-size: 16px; }
.oben nav a:hover { color: var(--weiss); text-decoration: underline; }
.oben nav { margin-left: auto; }
.sprachwahl { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; white-space: nowrap; }
.flagge { display: inline-flex; padding: 2px; border-radius: 4px; line-height: 0; border: 1px solid transparent; }
.flagge svg { display: block; width: 22px; height: 13px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
a.flagge { opacity: .75; transition: opacity .15s, border-color .15s; }
a.flagge:hover, a.flagge:focus-visible { opacity: 1; border-color: rgba(255, 255, 255, .6); }
.flagge.aktiv { border-color: var(--weiss); background: rgba(255, 255, 255, .15); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fuss .sprachwahl { margin-left: 20px; }
.fuss .sprachwahl a { margin-left: 0; }
.fuss nav { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }


/* ---------- Tresen: Download und Handy ---------- */
.tresen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding: 44px 24px 24px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--signal); color: var(--weiss); text-decoration: none;
  font: 700 24px/1 var(--schmal); padding: 17px 26px 16px; border-radius: 10px; box-shadow: 0 4px 0 var(--signal-dunkel); }
.knopf:hover { background: #F07F28; }
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--signal-dunkel); }
.knopf svg { width: 24px; height: 24px; }
.knopf.aus { background: #9AA7B6; box-shadow: 0 4px 0 #7D8A99; pointer-events: none; }
.knopf.zweit { background: var(--weiss); color: var(--marine, #14304F); box-shadow: 0 4px 0 #C9D2DC; margin-left: 10px; }
.knopf.zweit:hover { background: #F2F5F8; }
.dateiinfo { font-size: 15px; color: var(--leise); margin: 14px 0 0; }
.neu { margin: 10px 0 0; font-size: 16px; }
.kurz { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 36em; }
.kurz li { padding-left: 34px; position: relative; }
.kurz li::before { content: ""; position: absolute; left: 0; top: .45em; width: 18px; height: 10px; border-left: 4px solid var(--signal);
  border-bottom: 4px solid var(--signal); transform: rotate(-45deg); }

/* Handy mit dem Lieferanten-Bildschirm der App */
.handy { background: #0E1826; border-radius: 38px; padding: 12px; box-shadow: 0 24px 50px -18px rgba(20, 40, 64, .55); margin-top: -96px; position: relative; z-index: 3; }
.schirm { background: #F3F5F8; border-radius: 28px; overflow: hidden; font-size: 13px; line-height: 1.3; }
.leiste { background: var(--marine); color: var(--weiss); padding: 26px 16px 12px; font: 700 19px/1.1 var(--normal); display: flex; justify-content: space-between; }
.leiste span { opacity: .8; font-weight: 400; }
.app { padding: 10px 14px 16px; }
.app .titel { font-size: 11.5px; color: #5F6368; margin: 8px 0 4px; }
.fotos { display: flex; gap: 6px; }
.fotos div { width: 64px; height: 64px; border-radius: 7px; }
.f1 { background: linear-gradient(#E8731A 0 30%, #fff 30% 34%, #1F3A5F 34%); }
.f2 { background: linear-gradient(135deg, #F7F7F7 55%, #C9D3DE 55%); border: 1px solid #D5DCE5; position: relative; }
.f2::after { content: ""; position: absolute; left: 9px; top: 12px; width: 40px; height: 5px; background: #1F3A5F; box-shadow: 0 10px 0 -1px #8A97A8, 0 18px 0 -1px #8A97A8; }
.f3 { background: radial-gradient(circle at 50% 40%, #F5C08F 0 18px, #DDE5EE 19px); }
.feld { display: flex; gap: 6px; align-items: center; }
.feld b { flex: 1; background: #fff; border-bottom: 2px solid #3D6A9E; padding: 7px 8px 5px; font-weight: 400; font-size: 13px; color: #1A2433; }
.mikro { width: 30px; height: 30px; border-radius: 7px; background: #455A64; display: grid; place-items: center; flex: none; }
.mikro svg { width: 14px; height: 14px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.produkt { display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid #D5DCE5; border-radius: 9px; padding: 7px; margin-top: 6px; }
.produkt i { width: 40px; height: 40px; border-radius: 6px; flex: none; background: linear-gradient(160deg, #3D6A9E, #9CB6D3); }
.produkt i.b { background: radial-gradient(circle at 50% 45%, #FFE2B8 0 9px, #E8731A 10px 15px, #F2F4F7 16px); }
.produkt strong { display: block; font-size: 13px; }
.produkt small { color: #5F6368; font-size: 11.5px; }
.sterne { color: #E8731A; letter-spacing: 1px; }

/* ---------- Abschnitte ---------- */
section { padding: 64px 0 8px; }
h2 { font: 700 clamp(34px, 4.5vw, 50px)/1 var(--schmal); margin: 0 0 22px; color: var(--marine); }
h3 { font: 600 24px/1.15 var(--schmal); margin: 0 0 6px; }
.lead { max-width: 38em; margin: 0 0 30px; color: var(--leise); }

/* Ablauf am Stand – echte Reihenfolge, deshalb nummeriert */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: schritt;
  border-top: 4px solid var(--marine); }
.ablauf li { counter-increment: schritt; padding: 22px 22px 6px 0; }
.ablauf li + li { padding-left: 22px; border-left: 1px solid var(--linie); }
.ablauf li::before { content: counter(schritt); display: block; font: 700 54px/1 var(--schmal); color: var(--signal); margin-bottom: 10px; }
.ablauf p { margin: 0; font-size: 16.5px; color: var(--leise); }

/* Funktionen als ruhige Liste */
.funktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; }
.funktionen div { padding: 20px 0; border-top: 1px solid var(--linie); }
.funktionen dt { font: 600 24px/1.15 var(--schmal); margin-bottom: 6px; }
.funktionen dd { margin: 0; font-size: 17px; color: var(--leise); }

/* Bericht */
.bericht { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; }
.blatt { background: #fff; aspect-ratio: 210 / 297; border-radius: 3px; box-shadow: 0 1px 0 var(--linie), 10px 10px 0 -2px #DDE4EC; padding: 22px 20px; font-size: 9px; line-height: 1.35; color: #333; }
.blatt .k { background: #E6ECF4; border-top: 3px solid var(--marine); font: 700 14px/1 var(--normal); padding: 8px 8px 6px; margin-bottom: 8px; }
.blatt .z { display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; margin-bottom: 10px; }
.blatt .z span:nth-child(odd) { font-weight: 600; }
.blatt .bilder { display: flex; gap: 5px; margin-bottom: 10px; }
.blatt .bilder i { height: 46px; flex: 1; border-radius: 2px; background: linear-gradient(#E8731A 0 28%, #1F3A5F 28%); }
.blatt .bilder i:nth-child(2) { flex: .8; background: linear-gradient(135deg, #F3F3F3 55%, #C9D3DE 55%); border: 1px solid #ddd; }
.blatt .p { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid #E3E7EC; }
.blatt .p i { height: 42px; border-radius: 2px; background: linear-gradient(160deg, #3D6A9E, #9CB6D3); }
.blatt .p:nth-of-type(2) i { background: radial-gradient(circle at 50% 45%, #FFE2B8 0 7px, #E8731A 8px 12px, #F2F4F7 13px); }
.blatt b { display: block; font-size: 10px; }
.formate { list-style: none; margin: 0; padding: 0; }
.formate li { padding: 16px 0; border-top: 1px solid var(--linie); }
.formate strong { font: 600 24px/1.1 var(--schmal); display: block; margin-bottom: 4px; }
.formate span { color: var(--leise); font-size: 17px; }

/* Bildschirmfotos (optional, aus bilder/) */
.galerie { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.galerie figure { margin: 0; flex: 0 0 230px; scroll-snap-align: start; }
.galerie img { width: 230px; border-radius: 18px; border: 6px solid #0E1826; display: block; }
.galerie figcaption { font-size: 15px; color: var(--leise); margin-top: 8px; }

/* Installation */
.installieren { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.installieren ol { margin: 0; padding-left: 1.3em; }
.installieren li { margin-bottom: 10px; }
.installieren li::marker { font-family: var(--schmal); font-weight: 700; color: var(--signal); }
.hinweis { background: #fff; border-left: 5px solid var(--marine); padding: 18px 22px; border-radius: 0 10px 10px 0; font-size: 17px; }
.hinweis p { margin: 0 0 10px; }
.hinweis p:last-child { margin: 0; }

.schluss { margin: 72px 0 0; background: var(--marine); color: var(--weiss); border-top: 10px solid var(--tief); padding: 44px 0; }
.schluss .breite { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.schluss h2 { color: var(--weiss); margin: 0; }
.schluss p { margin: 6px 0 0; color: #DCE5F0; }

.fuss { background: var(--tief); color: #AFC0D4; font-size: 15px; padding: 22px 0; }
.fuss .breite { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fuss a { color: #DCE5F0; margin-left: 20px; }
.fuss nav a:first-child { margin-left: 0; }

/* Unterseiten */
.unterseite .text { max-width: 760px; padding-top: 36px; padding-bottom: 60px; }
.unterseite h1 { font: 700 44px/1 var(--schmal); color: var(--marine); margin: 0 0 20px; }
.unterseite h2 { font-size: 28px; margin: 30px 0 8px; }
.unterseite .klein { font-size: 15px; color: var(--leise); }

/* ---------- Preis ---------- */
.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 26px 0 30px; max-width: 860px; }
.preis { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 22px 24px 20px; }
.preis.voll { border: 2px solid var(--signal); box-shadow: 0 8px 24px rgba(20, 40, 64, .10); }
.preis h3 { font: 700 26px/1 var(--schmal); color: var(--marine); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.preis .betrag { font: 700 46px/1.05 var(--schmal); margin: 0 0 12px; color: var(--text); }
.preis ul { margin: 0 0 16px; padding-left: 20px; }
.preis li { margin-bottom: 4px; }
.preis .knopf { margin-top: 4px; }
#kaufen .klein, .preis .klein { font-size: 15px; color: var(--leise); }
.ablauf.kurz3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin-bottom: 18px; }
.ablauf.kurz3 li::before { font-size: 40px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .tresen { grid-template-columns: 1fr; }
  .handy { margin: 8px auto 0; max-width: 340px; width: 100%; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .ablauf li:nth-child(3) { padding-left: 0; border-left: 0; }
  .bericht, .installieren { grid-template-columns: 1fr; }
  .blatt { max-width: 300px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .breite, .tresen { padding-left: 16px; padding-right: 16px; }
  .oben nav { display: none; }
  .blende { padding-top: 30px; }
  .funktionen { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li, .ablauf li + li { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .preise, .ablauf.kurz3 { grid-template-columns: 1fr; }
  .fuss a { margin-left: 0; margin-right: 18px; }
}
/* FairCompass PC */
.pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.pc .knopf { margin-top: 22px; }
.fenster { background: #EEF1F5; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 var(--linie), 10px 10px 0 -2px #DDE4EC; font: 11px/1.3 "Segoe UI", var(--normal); color: #1d2430; }
.fenster .kopf { background: var(--marine); color: #fff; display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.fenster .kopf span { background: #2c4d78; border-radius: 5px; padding: 3px 8px; font-weight: 600; font-size: 10.5px; }
.fenster .kopf .gruen { margin-left: auto; background: #2E7D32; border-radius: 10px; font-weight: 500; }
.fenster .kopf .orange { background: var(--signal); }
.fenster .inhalt { display: grid; grid-template-columns: 42% 1fr; gap: 8px; padding: 8px; }
.fenster .karte { background: #fff; border-radius: 8px; padding: 8px 9px; }
.fenster h4 { margin: 0 0 4px; font: 700 13px/1.2 "Segoe UI", var(--normal); color: var(--marine); }
.fenster .chips { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.fenster .chips i { font-style: normal; border: 1px solid #d5dce6; border-radius: 8px; padding: 0 6px; font-size: 9px; color: #3d4a5c; }
.fenster .chips i.a { background: var(--marine); border-color: var(--marine); color: #fff; }
.fenster .z { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-top: 1px solid #eef1f5; }
.fenster .z.sel { background: #e8f0fb; box-shadow: inset 3px 0 #3D6A9E; margin: 0 -9px; padding: 6px 9px; }
.fenster .z > i { flex: none; width: 24px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, #9fb3cf, #c9d4e3); }
.fenster .z div { flex: 1; min-width: 0; }
.fenster .z b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster .z small { display: block; color: #6b7684; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster .st { font-size: 8.5px; font-weight: 600; border-radius: 8px; padding: 1px 6px; background: #fff3e0; color: #b45f06; white-space: nowrap; }
.fenster .st.g { background: #e8f5e9; color: #2e7d32; }
.fenster .st.o { background: #f1f3f5; color: #5f6368; }
.fenster .p > i { width: 50px; height: 38px; border-radius: 6px; background: linear-gradient(135deg, #d7dee8, #b8c5d6); }
.fenster .eur { text-align: right; font-weight: 700; color: var(--marine); font-size: 12px; white-space: nowrap; }
.fenster .eur small { font-weight: 400; color: #6b7684; font-size: 9px; }
.fenster .fotos { display: flex; gap: 6px; padding: 0 8px 8px; }
.fenster .fotos i { flex: 1; height: 38px; border-radius: 6px; background: linear-gradient(135deg, #cfd8e4, #a9b8cc); }
@media (max-width: 560px) {
  .fenster .kopf .gruen { display: none; }
  .fenster .kopf .orange { margin-left: auto; }
  .fenster .inhalt { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .pc { grid-template-columns: 1fr; } }

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