/* Braigez. One stylesheet, no framework, no third-party assets. */

:root {
  --page: #FBFBF9;
  --band: #F5F4ED;
  --ink: #1E1C1C;
  --ink-quiet: #5B5854;
  --accent: #0066B3;
  --accent-deep: #002D67;
  --rule: #E5E1D8;
  --panel: #1E1C1C;
  --error: #A62B1F;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  hyphens: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

a, button, .btn, summary {
  transition: color .12s ease-in-out, background-color .12s ease-in-out, border-color .12s ease-in-out;
}

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Layout */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.prose { max-width: 680px; }
.tablecol { max-width: 880px; }

section { padding: 96px 0; }
section.band { background: var(--band); }
section.panel { background: var(--panel); color: var(--page); }
section.panel h2, section.panel h3 { color: var(--page); }
section.panel .quiet { color: #B8B4AE; }
section.panel a { color: #8FC4EE; }

@media (max-width: 640px) {
  section { padding: 56px 0; }
}

/* Type */
h1 {
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
h2 {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 32px 0 8px; }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  margin: 0 0 16px;
}
.quiet { color: var(--ink-quiet); }
.small { font-size: 15px; line-height: 1.5; color: var(--ink-quiet); }
.lead { font-size: 19px; line-height: 1.5; }

ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { margin-bottom: 10px; }

/* Header */
header.site {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  background: var(--page);
}
.hrow { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; padding-right: 74px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { display: block; }
.brand b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.brand span { font-size: 12px; color: var(--ink-quiet); }
/* Die Navigation nimmt den Rest der Zeile und bricht bei Bedarf intern um,
   damit der Telefonblock nicht je nach Sprachlaenge die Zeile wechselt. */
nav.site { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
nav.site a { color: var(--ink); text-decoration: none; }
nav.site a:hover { color: var(--accent); }

/* Menuetaste. Nur auf schmalen Geraeten sichtbar, siehe Medienabfrage unten. */
.navtoggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  cursor: pointer;
}
.navtoggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .15s ease-in-out, opacity .15s ease-in-out;
}
.navtoggle:hover { border-color: var(--accent); }
.navtoggle:hover span { background: var(--accent); }
.navtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .navtoggle span { transition: none; } }
/* Telefonblock steht am Zeilenende, direkt links neben der Sprachblase.
   Auf schmalen Geraeten rueckt er neben die Menuetaste, siehe Medienabfrage. */
.headphone { font-size: 15px; order: 3; flex: 0 0 auto; margin: 0; }
.headphone a { font-weight: 600; text-decoration: none; }

/* Sprachumschalter: eine Blase, ein Klick, keine Auswahlliste */
.langflag {
  position: absolute; right: 24px; top: 50%; margin-top: -17px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 3px rgba(30, 28, 28, .12);
  transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out, transform .12s ease-in-out;
}
.langflag svg { display: block; width: 100%; height: 100%; }
.langflag:hover { border-color: var(--accent); box-shadow: 0 2px 7px rgba(30, 28, 28, .22); transform: translateY(-1px); }
.langflag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .langflag:hover { transform: none; } }

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  min-height: 48px;
  border: 0;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--page); }
.btn-primary:hover { background: var(--accent-deep); color: var(--page); }
.btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
section.panel .btn-secondary { color: var(--page); border-color: var(--page); }

.btnrow { display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0 0; }
.btnblock { display: flex; flex-direction: column; align-items: flex-start; }
.btneffort { font-size: 15px; color: var(--ink-quiet); margin-top: 8px; max-width: 280px; }
section.panel .btneffort { color: #B8B4AE; }

/* Tables */
table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45; margin: 0 0 20px; }
th, td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }
td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }
section.panel th, section.panel td { border-bottom-color: #3A3735; }

/* Price figure */
.preis { font-size: 40px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0 0 4px; }

/* Cards / steps */
.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; padding-left: 44px; position: relative; margin-bottom: 24px; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink); color: var(--page);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
}

/* FAQ */
details { border-bottom: 1px solid var(--rule); padding: 18px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; color: var(--accent); font-weight: 600; }
details[open] summary::before { content: "\2212  "; }
details p { margin: 12px 0 0; max-width: 680px; }

/* Person block */
.person { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.person .photo {
  width: 200px; height: 240px; border-radius: 8px;
  background: var(--rule); color: var(--ink-quiet);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; text-align: center; padding: 12px; flex: none;
}
.person .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.person .txt { flex: 1 1 380px; }

/* Placeholder marker */
.todo {
  background: #FFF4D6;
  border-left: 3px solid #C08A00;
  padding: 2px 6px;
  font-size: 15px;
  color: #6B4C00;
}

/* Footer */
footer.site { border-top: 1px solid var(--rule); padding: 40px 0; font-size: 15px; color: var(--ink-quiet); }
footer.site a { color: var(--ink-quiet); }
.frow { display: flex; gap: 28px; flex-wrap: wrap; }

/* Brief als Blatt Papier, nicht als Codeblock */
.briefblatt {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: #FFFFFF;
  max-width: 620px;
  padding: 44px 40px;
  margin: 20px 0 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(30, 28, 28, .06), 0 10px 28px rgba(30, 28, 28, .08);
  overflow-wrap: break-word;
}
.briefblatt .luecke { color: var(--ink-quiet); background: #F3EFE2; padding: 0 3px; border-radius: 2px; }

/* Eingabefelder fuer die Briefe */
.felder { margin: 24px 0 0; }
.feldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; margin: 16px 0 0; }
.feldgrid label { display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--ink-quiet); }
.feldgrid input {
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 11px 12px; min-height: 46px;
  background: var(--page); border: 1px solid var(--ink); border-radius: 8px;
}
.feldgrid input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.feldgrid .weit { grid-column: 1 / -1; }

/* Die drei Teile, aus denen jede Kartenzahlung besteht.
   Nummeriert, weil die Reihenfolge die Aussage ist: erst was fremd ist
   und feststeht, zuletzt der Teil, an dem ich verdiene. */
ol.dreiteile {
  counter-reset: teil; list-style: none;
  margin: 22px 0 24px; padding: 0;
}
ol.dreiteile li {
  counter-increment: teil; position: relative;
  padding: 0 0 0 46px; margin: 0 0 16px;
}
ol.dreiteile li::before {
  content: counter(teil);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--page); background: var(--accent);
}
section.panel ol.dreiteile li::before { color: var(--panel); background: #B8B4AE; }

/* Datei-Auswahl im Upload-Block */
.feldgrid input[type="file"] {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 10px; min-height: 46px;
  background: var(--page); border: 1px dashed var(--ink); border-radius: 8px;
  cursor: pointer;
}
.feldgrid input[type="file"]::file-selector-button {
  font: inherit; font-size: 15px; margin-right: 12px;
  padding: 7px 14px; border: 0; border-radius: 6px;
  background: var(--ink); color: var(--page); cursor: pointer;
}

/* Zusatzfelder in der Nachrichtenblase */
.bz-panel input[type="text"] {
  display: block; width: 100%; font: inherit; font-size: 15px;
  margin-top: 8px; padding: 10px 12px; min-height: 44px;
  color: var(--ink); background: var(--page);
  border: 1px solid var(--rule); border-radius: 8px;
}
.bz-panel input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Skip link */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--page); padding: 10px 16px; z-index: 10; }

/* Assistent-Bubble unten rechts */
.bz-bubble{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.bz-toggle{width:auto;padding:14px 20px;border-radius:999px;background:var(--ink);color:var(--page);border:0;font-size:16px;font-weight:500;font-family:inherit;cursor:pointer;box-shadow:0 2px 10px rgba(30,28,28,.18);display:flex;align-items:center;gap:10px}
.bz-toggle:hover{background:var(--accent-deep)}
.bz-toggle .dot{width:8px;height:8px;border-radius:50%;background:#7BC47F;flex:none}
.bz-panel{width:min(360px,calc(100vw - 40px));background:var(--page);border:1px solid var(--rule);border-radius:12px;box-shadow:0 8px 30px rgba(30,28,28,.16);padding:20px;display:none}
.bz-panel[data-open="true"]{display:block}
.bz-panel h3{margin:0 0 8px;font-size:17px}
.bz-panel p{font-size:15px;line-height:1.5;color:var(--ink-quiet);margin:0 0 14px}
.bz-panel textarea{width:100%;min-height:110px;font-family:inherit;font-size:16px;line-height:1.5;padding:12px;border:2px solid var(--ink);border-radius:8px;background:var(--page);color:var(--ink);resize:vertical}
.bz-panel .row{display:flex;gap:10px;margin-top:12px;align-items:center}
.bz-panel .btn{padding:12px 18px;font-size:16px;min-height:44px}
@media (max-width:640px){.bz-bubble{right:12px;bottom:12px}}
/* Vergleichstabelle: andere Anbieter gegen Braigez */
:root{ --gold:#8A6300; --no:#A62B1F; }
.vs{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--page)}

.vs-head{display:flex;align-items:stretch;font-size:14px;font-weight:600;border-bottom:1px solid var(--rule)}
.vs-head .lbl{flex:1;min-width:0;padding:14px 12px 14px 16px;color:var(--ink-quiet);font-weight:400;display:flex;align-items:center}
.vs-head .them,.vs-head .us{width:108px;flex:none;padding:14px 8px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25}
.vs-head .them{color:var(--ink-quiet)}
.vs-head .us{color:var(--ink);border-left:1px solid var(--rule)}

.vs-row{border:0;border-top:1px solid var(--rule);padding:0;margin:0}
.vs-row summary{display:flex;align-items:stretch;font-weight:400;font-size:16px;list-style:none}
.vs-row summary::before,.vs-row summary::marker{content:none;display:none}
.vs-row summary .lbl{flex:1;min-width:0;padding:16px 12px 16px 16px;display:flex;align-items:center;gap:10px}
.vs-row summary .lbl::after{content:"+";color:var(--accent);font-weight:600;font-size:15px;flex:none;width:12px;text-align:center}
.vs-row[open] summary .lbl::after{content:"\2212"}
.vs-row summary .them,.vs-row summary .us{width:108px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.vs-row summary .them{color:var(--ink-quiet)}
.vs-row summary .us{color:var(--ink-quiet);border-left:1px solid var(--rule)}
.vs-row summary .them.no{color:var(--no)}
.vs-row summary .us.only{color:var(--gold);font-weight:600}

.vs-row[open]{background:var(--band)}
.vs-row[open] summary .us{border-left-color:var(--rule)}
.vs-detail{padding:0 16px 22px 16px;max-width:680px;font-size:16px;line-height:1.6;color:var(--ink-quiet)}
.vs-note{font-size:15px;color:var(--ink-quiet);margin-top:16px}

@media (max-width:560px){
  .vs-head .them,.vs-head .us{width:62px;padding:10px 4px;font-size:12px}
  .vs-head .lbl{padding:10px 8px 10px 12px}
  .vs-row summary .them,.vs-row summary .us{width:62px}
  .vs-row summary .lbl{padding:14px 8px 14px 12px;font-size:15px}
  .vs-detail{padding:0 12px 18px 12px}
}
/* Hero mit Bild, randlos */
.hero{position:relative;padding:0;background:var(--band);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("hero.jpg");
  background-size:cover;background-position:62% 38%;background-repeat:no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg, rgba(251,251,249,.96) 0%, rgba(251,251,249,.93) 30%, rgba(251,251,249,.87) 50%, rgba(251,251,249,.70) 58%, rgba(251,251,249,.22) 66%, rgba(251,251,249,0) 76%);
}
.hero .wrap{position:relative;z-index:1;padding-top:112px;padding-bottom:112px;min-height:min(78vh,660px);display:flex;flex-direction:column;justify-content:center}
.hero .prose{max-width:600px}
.hero h1,.hero .lead{text-shadow:0 1px 10px rgba(251,251,249,.6)}

@media (max-width:820px){
  .hero::before{background-position:68% 40%}
  .hero::after{background:linear-gradient(180deg, rgba(251,251,249,.93) 0%, rgba(251,251,249,.90) 55%, rgba(251,251,249,.94) 100%)}
  .hero .wrap{padding-top:72px;padding-bottom:72px;min-height:auto}

  /* Navigation hinter einer Menuetaste, direkt unter dem Logo, der Telefonblock
     rechts daneben. Ohne JavaScript wird data-open nie gesetzt und die Links
     bleiben sichtbar. Die Reihenfolge ist explizit, damit der Telefonblock
     stehen bleibt, egal ob das Menue offen oder zu ist. */
  .brand{flex-basis:100%;order:0}
  .navtoggle{display:inline-flex;order:1}
  .headphone{order:2}
  nav.site{order:3;flex:1 1 100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0}
  nav.site[data-open="false"]{display:none}
  nav.site a{padding:11px 0;font-size:16px}
  .langflag{top:5px;margin-top:0}
}
@media (prefers-reduced-motion:no-preference){
  .hero::before{transition:none}
}