/* Schriften lokal — nie von Google. Liegen unter fonts/titillium-web/ */
@font-face{font-family:"Titillium Web";src:url("/assets/fonts/TitilliumWeb-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("/assets/fonts/TitilliumWeb-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("/assets/fonts/TitilliumWeb-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* Farben, Schrift und Maße stammen aus dem Theme-Studio auf kit.kandlen-it.de
     (theme_mods_kit-kandlen-theme → kit_brand_tokens, gelesen 27.07.2026).
     Nichts hier ist frei gewählt — Änderungen gehören ins Studio, nicht hierher. */
  --ci:#274C90;        /* primary                */
  --ci-2:#4C5261;      /* secondary · cta_hover  */
  --ci-3:#727A92;      /* accent                 */
  --grund:#fafafa;     /* bg                     */
  --text-hell:#212529; /* text                   */
  --ueber:#274C90;     /* heading_color          */
  /* Jakob 27.07.: Kopf- und Fussleiste in der Primaerfarbe. Im Theme-Studio
     steht top_bar_bg noch auf #f4f4f5 — das muss dort nachgezogen werden. */
  --topbar-bg:#274C90; --topbar-text:#E8EEF9;
  --fuss-bg:#274C90;   --fuss-text:#fafafa;
  --unten-bg:#4C5261;  --unten-text:#ffffff;
  --w:1320px;          /* container_max          */
  --radius:8px;        /* radius                 */
  --luft:4rem;         /* section_padding        */

  /* Abgeleitet, nicht aus dem Studio: helle Flaechen und Linien fuer die
     Vorschau, plus eine dunklere CI-Stufe fuer den Knopf-Hover. */
  --ci-d:#1D3A6E; --weiss:#fff; --hell:#F4F7FB;
  --text-mild:#4A5568; --text-leise:#5D6B84;
  --linie:rgba(255,255,255,.16); --linie-hell:#dde2ee;
  --blau:#274C90;

  /* Wuerfelseiten — feste Farben, nicht aendern (final 22.07.) */
  --d1:#274C90; --d2:#4C5261; --d3:#636B82; --d4:#0F766E; --d5:#0C6E8F; --d6:#9D174D;
}

/* Sprungmarke: liegt ausserhalb des Sichtfelds und kommt erst bei Tastaturfokus
   hervor. Ohne das steht sie sichtbar ueber der Kopfzeile. */
.skip{position:absolute;left:-9999px;background:var(--ci);color:#fff;padding:10px 16px;
  z-index:99;border-radius:0 0 var(--radius) 0;text-decoration:none}
.skip:focus{left:0;top:0}

/* Fokus sichtbar halten — Tastaturbedienung ist Baustein 1.5 im Wuerfel. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{outline:3px solid var(--ci);outline-offset:2px}
.dunkel a:focus-visible,.dunkel button:focus-visible{outline-color:#fff}

/* Sanftes Scrollen — gilt auch fuer die Ankersprünge im Menü, die sonst hart
   springen. Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   weiterhin den harten Sprung; das ist die Regel, nicht die Ausnahme. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* Die Kopfzeile klebt oben — ohne Abstand verschwindet der Anfang eines
   angesprungenen Abschnitts darunter. */
section[id],#anfrage{scroll-margin-top:5.5rem}

*{box-sizing:border-box}
body{margin:0;font-family:"Titillium Web",system-ui,sans-serif;background:var(--grund);
     color:var(--text-hell);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
/* Container nach Bootstrap-5-Staffelung statt einer festen Breite.
   Deren xxl (1320px) ist genau der container_max aus dem Theme-Studio.
   Seitenabstand 0.75rem = Bootstrap-Gutter. */
.wrap{width:100%;margin-inline:auto;padding-inline:.75rem}
@media(min-width: 576px){.wrap{max-width:540px}}
@media(min-width: 768px){.wrap{max-width:720px}}
@media(min-width: 992px){.wrap{max-width:960px}}
@media(min-width:1200px){.wrap{max-width:1140px}}
@media(min-width:1400px){.wrap{max-width:var(--w)}}
section{padding:4.5rem 0}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.01em}
h3{font-size:1.1rem}
p{margin:0 0 1rem}
a{color:var(--blau)}

/* dunkle Abschnitte */
.dunkel{background:var(--ci);color:#E8EEF9}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel a{color:#C7D6F0}
.grau{background:var(--hell)}

/* Kopf */
.topbar{background:var(--topbar-bg);color:var(--topbar-text);font-size:.84rem;padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.topbar a{color:#fff}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between}
.nav{background:var(--weiss);border-bottom:1px solid var(--linie-hell);position:sticky;top:0;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;padding-top:.9rem;padding-bottom:.9rem}
.marke{display:flex;align-items:center;flex:0 0 auto}
.marke img{display:block;height:38px;width:auto}
.menu{display:flex;gap:1.3rem;margin-left:auto;list-style:none;padding:0;flex-wrap:wrap}
.menu a{color:var(--text-hell);text-decoration:none;font-size:.95rem;padding:.2rem 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--ci);border-bottom-color:var(--ci)}
.knopf{display:inline-block;background:var(--ci);color:#fff;font-weight:700;
       text-decoration:none;padding:.65rem 1.3rem;border-radius:7px;font-size:.95rem;border:0}
.knopf:hover{background:var(--ci-d)}
/* Auf CI-farbenem Grund kehrt der Knopf um — blau auf blau ist unsichtbar. */
.dunkel .knopf{background:var(--weiss);color:var(--ci)}
.dunkel .knopf:hover{background:#E8EEF9;color:var(--ci-d)}
.dunkel .knopf-hell{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.dunkel .knopf-hell:hover{background:rgba(255,255,255,.12);color:#fff}
.knopf-hell{background:transparent;color:#CBD5E1;border:1px solid var(--linie)}
.knopf-hell:hover{background:rgba(255,255,255,.06);color:#fff}


/* Aufmacher */
.hero{padding:5.5rem 0 4.5rem}
/* Weiss, nicht #4C5261: Der Hero steht auf CI-Blau. Dunkelgrau darauf kommt
   auf 1,07:1 und waere unlesbar, das bisherige #94A3B8 auf 3,25:1 — beides
   unter AA. Weiss erreicht 8,32:1. */
.hero p.gross{font-size:1.15rem;max-width:44rem;color:#fff}
.hero .knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 0}
.belege{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:2.2rem 0 0;font-size:.9rem;color:#E8EEF9}
.belege span::before{content:"✓";color:#C7D6F0;font-weight:700;margin-right:.4rem}

/* Karten */
.karten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.karte{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:10px;padding:1.2rem}
.dunkel .karte{background:rgba(255,255,255,.08);border-color:var(--linie)}
.karte h3{margin-bottom:.3rem}
.karte p{font-size:.93rem;color:var(--text-mild);margin:0}
.dunkel .karte p{color:#E8EEF9}

.problem{background:#fdeceb;border-left:4px solid #B91C1C}
.loesung{background:#e6f3ec;border-left:4px solid #0B7A3B}

/* Würfel-Seiten */
.dims{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));margin:1.8rem 0 0}
.dim{padding:.9rem 1rem;border-radius:9px;color:#fff}
.dim b{display:block;font-size:1.6rem;line-height:1;opacity:.55}
.dim span{display:block;font-weight:700;margin:.2rem 0 .15rem}
.dim small{font-size:.82rem;opacity:.85;line-height:1.4;display:block}
.dim1{background:var(--d1)}.dim2{background:var(--d2)}.dim3{background:var(--d3)}
.dim4{background:var(--d4)}.dim5{background:var(--d5)}.dim6{background:var(--d6)}

/* Gesetze */
.gesetze{margin:1.4rem 0 0;display:grid;gap:.8rem}
.gesetz{background:var(--weiss);border-left:3px solid var(--blau);border-radius:0 8px 8px 0;padding:.9rem 1.1rem}
.gesetz b{display:block;margin-bottom:.15rem}
.gesetz p{font-size:.93rem;color:var(--text-mild);margin:0 0 .4rem}
.gesetz a{font-size:.88rem;font-weight:600;overflow-wrap:anywhere}

/* Selbsttests */
.tests{width:100%;border-collapse:collapse;margin:1.2rem 0 0;font-size:.93rem;background:var(--weiss);
       border-radius:10px;overflow:hidden}
.tests th{background:var(--blau);color:#fff;text-align:left;padding:.6rem .8rem;
          font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.tests td{padding:.65rem .8rem;border-bottom:1px solid var(--linie-hell);vertical-align:top}
.tests tr:last-child td{border-bottom:0}
.tests a{font-weight:600;overflow-wrap:anywhere}
.marke-dim{display:inline-block;color:#fff;font-size:.76rem;font-weight:700;
           padding:.1rem .45rem;border-radius:4px;white-space:nowrap}

/* Auf schmalen Geräten wird die Test-Tabelle zu Blöcken. Drei Spalten passen
   nicht in 320px, und waagerecht scrollen ist auf einer Verkaufsseite die
   schlechtere Lösung als untereinander lesen. */
@media(max-width:640px){
  .tests,.tests tbody,.tests tr,.tests td{display:block;width:100%}
  .tests thead{display:none}
  .tests tr{border-bottom:1px solid var(--linie-hell);padding:.6rem .8rem}
  .tests tr:last-child{border-bottom:0}
  .tests td{border:0;padding:.15rem 0}
  .tests td:first-child{margin-bottom:.3rem}
}

/* Preise */
.preise{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.preis{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:10px;padding:1.4rem}
.preis .zahl{font-size:1.9rem;font-weight:700;color:var(--blau);line-height:1.1}
.preis .zusatz{font-size:.85rem;color:var(--text-leise);display:block;margin-bottom:.7rem}
.preis ul{margin:0;padding-left:1.1rem}
.preis li{margin:.3rem 0;font-size:.93rem;color:var(--text-mild)}

/* Schritte */
.schritte{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.schritt{background:var(--ci-2);border-radius:10px;padding:1.2rem}
/* Ablauf-Schritte: stand viermal als Inline-Style im HTML, mit #94A3B8 auf
   #4C5261 = 3,05:1. #E5E9F0 erreicht 6,42:1. */
.schritt p{font-size:.92rem;color:#E5E9F0;margin:0}
.schritt b{display:block;font-size:1.9rem;color:var(--ci);line-height:1;margin-bottom:.3rem}

/* Stimmen */
.stimmen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.stimme{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:10px;padding:1.2rem}
.stimme p{font-size:.95rem;font-style:italic;color:var(--text-mild)}
.stimme cite{font-style:normal;font-weight:600;font-size:.9rem}
.sterne{color:#B45309;letter-spacing:.1em}

/* FAQ */
details{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:9px;
        padding:.9rem 1.1rem;margin:0 0 .6rem}
summary{font-weight:600;cursor:pointer}
details p{margin:.7rem 0 0;font-size:.94rem;color:var(--text-mild)}

/* Kontakt */
.kontakt{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.kontakt ul{list-style:none;padding:0;margin:1rem 0 0}
.kontakt li{margin:.5rem 0}
.feld input,.feld textarea{width:100%;padding:.6rem .7rem;border-radius:7px;
  border:1px solid var(--linie);background:var(--ci-2);color:#fff;font:inherit;font-size:.95rem}

/* Fuß */
footer{background:var(--fuss-bg);color:#D5DFF2;padding:3rem 0 1.5rem;font-size:.92rem}
.fspalten{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
footer h3{color:#fff;font-size:.95rem;margin-bottom:.5rem}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
.frecht{border-top:1px solid var(--linie);margin-top:2rem;padding-top:1.2rem;
        display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.88rem}

   

.wuerfel-grid{display:grid;gap:1.6rem;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:820px){
  .wuerfel-grid{grid-template-columns:1fr}
    }
@media(prefers-reduced-motion:reduce){  }

/* Bildplätze — bewusst als Skizze, nicht als Stockfoto.
   Ein hübsches Platzhalterbild verführt dazu, es stehen zu lassen. */
.bildplatz{position:relative;border:2px dashed rgba(148,163,184,.55);border-radius:10px;
  background:repeating-linear-gradient(45deg,rgba(148,163,184,.07) 0 10px,transparent 10px 20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:1.4rem 1.1rem;min-height:200px;gap:.3rem}
.bildplatz b{font-size:.95rem;color:#4A5568}
.dunkel .bildplatz b{color:#E8EEF9}
.bildplatz small{font-size:.82rem;color:var(--text-leise);line-height:1.5;max-width:26rem}
.dunkel .bildplatz small{color:#E8EEF9}
.bildplatz .format{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#92400E;background:#FDE9C8;padding:.1rem .5rem;border-radius:4px}
/* Auf farbigem Grund kehrt die Marke um — das Braun daerauf kaeme nur auf 2,6:1. */
.dunkel .bildplatz .format{color:#3B2200;background:#FDE68A}
.hero-grid{display:grid;gap:2rem;grid-template-columns:1.15fr .85fr;align-items:center}
.portraet{width:104px;height:104px;border-radius:50%;flex:0 0 auto;
  border:2px dashed rgba(148,163,184,.55);display:flex;align-items:center;justify-content:center;
  font-size:.68rem;color:var(--text-leise);text-align:center;padding:.4rem;line-height:1.3}
.ueber-kopf{display:flex;gap:1.1rem;align-items:center;margin:0 0 1rem}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}}

/* Vorschau-Hinweis */
.marker{background:rgba(217,119,6,.14);border-left:3px solid #D97706;padding:.7rem .9rem;
        border-radius:0 7px 7px 0;font-size:.88rem;color:var(--text-mild);margin:1rem 0 0}
.dunkel .marker{color:#FDE68A}

/* Reine Textseiten (Impressum, Datenschutz, Barrierefreiheit): schmalere
   Lesebreite als die Startseite — 1320px Fliesstext liest sich nicht. */
.text .wrap{max-width:min(var(--w),820px)}
.text h1{margin-bottom:.8rem}
.text h2{margin-top:2rem}

/* --- Themen-Knöpfe: tragen Betreff und Textvorschlag ins Formular --- */
.themen{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.thema-knopf{font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);padding:.5rem 1rem}
.thema-knopf:hover{background:rgba(255,255,255,.20)}
.thema-knopf[aria-pressed="true"]{background:#fff;color:var(--ci);border-color:#fff}

/* --- Kontaktformular --- */
#anfrage{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:1.5rem 1.6rem}
#anfrage h3{margin-top:0}
#anfrage .klein{font-size:.86rem;color:#C7D6F0;margin-bottom:1.2rem}
.feld{margin-bottom:.9rem}
.feld label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.3rem;color:#fff}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{
  width:100%;font:inherit;padding:.6rem .75rem;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.35);background:#fff;color:var(--text-hell)}
.feld .opt{font-weight:400;color:#C7D6F0}
/* Sternchen und "(optional)" gehoeren in die Label-Zeile, nicht darunter. */
.feld label span{display:inline;font-size:inherit;margin:0}

/* Zustimmung: Kästchen und Text nebeneinander, Text bleibt normal gewichtet. */
.feld-zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0}
.feld-zustimmung input{margin-top:.25rem;flex:0 0 auto;width:1.05rem;height:1.05rem}
.feld-zustimmung label{font-weight:400;font-size:.9rem;line-height:1.45}
.feld-zustimmung a{color:#fff;text-decoration:underline}

/* Rückmeldungen nach dem Absenden. */
.meldung{border-radius:var(--radius);padding:.7rem .9rem;font-size:.93rem;margin:0 0 1rem}
.meldung--ok{background:#DCFCE7;color:#14532D;border-left:4px solid #15803D}
.meldung--fehler{background:#FEE2E2;color:#7F1D1D;border-left:4px solid #B91C1C}

/* Honigtopf gegen Spam — für Menschen unsichtbar, für Skripte verlockend. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

#anfrage button[type=submit]{margin-top:.3rem}
#anfrage button[type=submit]:disabled{opacity:.6;cursor:progress}

/* --- Problem / Lösung -------------------------------------------------- */
.problem-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  margin:1.6rem 0 0}
/* Rot und Grün wie in der alten .gegen-Regel aus v0005 — die Werte waren dort
   schon erprobt: #B91C1C auf #fdeceb (6,47:1) und #0B7A3B auf #e6f3ec (5,44:1). */
.problem-card{background:#fdeceb;border:1px solid rgba(185,28,28,.18);
  border-left:4px solid #B91C1C;border-radius:var(--radius);padding:1.4rem 1.6rem}
.solution-card{background:#e6f3ec;border-color:rgba(11,122,59,.18);
  border-left-color:#0B7A3B}
.card-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-leise);margin-bottom:.9rem}
.problem-card .card-label{color:#B91C1C}
.solution-card .card-label{color:#0B7A3B}

.check-list{list-style:none;padding:0;margin:0}
.check-list li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:.96rem}
.check-list li:last-child{margin-bottom:0}
/* Das Zeichen ist Schmuck — Bedeutung steht im Text, nicht im Haken. Deshalb
   aria-hidden über content und keine Aussage, die nur farblich transportiert wird. */
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.25rem;
  text-align:center;font-weight:700;color:#0B7A3B}
.check-list.negative li::before{content:"✗";color:#B91C1C}

/* --- Farbkasten: Abschnitt als abgesetzte Fläche ----------------------- */
/* Die Farbe kommt per --kasten aus der Würfelpalette. Karten und Tabellen
   darin bleiben weiß, damit die Fläche nicht erdrückt. Weißer Text erreicht
   auf allen sechs Würfelfarben mindestens 5,31:1. */
.kasten{background:transparent;padding-top:0}
.kasten > .wrap{background:var(--kasten);color:#fff;border-radius:var(--radius);
  padding-top:2.6rem;padding-bottom:2.6rem;padding-inline:clamp(1.2rem,3vw,2.4rem)}
.kasten h2,.kasten h3,.kasten b{color:#fff}
.kasten > .wrap > p{color:#fff}
.kasten .karte,.kasten .gesetz,.kasten .tests{background:var(--weiss)}
.kasten .karte h3,.kasten .gesetz b{color:var(--kasten)}
.kasten .karte p,.kasten .gesetz p,.kasten .tests td{color:var(--text-mild)}
.kasten .karte .weiter{color:var(--kasten);font-weight:700}
.kasten .hinweis-klein{font-size:.88rem;color:#fff;opacity:.92;margin-top:1rem}

.aufklaerung{--kasten:#636B82}   /* Würfelseite 3 · Sichtbarkeit */
.leistungen{--kasten:#0F766E}    /* Würfelseite 4 · Recht        */

.kasten .hinweis-klein code{background:rgba(255,255,255,.18);padding:.05rem .3rem;
  border-radius:4px;font-size:.92em}

/* --- Hauptmenü auf schmalen Geräten ------------------------------------ */
/* Der Schalter erscheint erst unter 900px. Ohne JavaScript bleibt das Menü
   sichtbar (die Ausblend-Regel hängt an .js-menue), damit die Navigation
   nicht von einem Skript abhängt. */
.menue-schalter{display:none;align-items:center;gap:.5rem;margin-left:auto;
  font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  background:transparent;color:var(--ci);border:1px solid var(--linie-hell);
  border-radius:var(--radius);padding:.5rem .8rem}
.menue-schalter .balken{position:relative;display:block;width:18px;height:2px;
  background:currentColor;border-radius:2px}
.menue-schalter .balken::before,.menue-schalter .balken::after{content:"";position:absolute;
  left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
.menue-schalter .balken::before{top:-6px}
.menue-schalter .balken::after{top:6px}
.menue-schalter[aria-expanded="true"]{background:var(--ci);color:#fff;border-color:var(--ci)}

@media (max-width:899px){
  .menue-schalter{display:flex}
  .js-menue .menu{display:none}
  .js-menue .menu.offen{display:flex;flex-direction:column;gap:0;
    order:3;width:100%;margin:.8rem 0 0;border-top:1px solid var(--linie-hell)}
  .js-menue .menu.offen li{width:100%}
  .js-menue .menu.offen a{display:block;padding:.85rem .2rem;
    border-bottom:1px solid var(--linie-hell);border-left:3px solid transparent}
  .js-menue .menu.offen a[aria-current="page"]{border-left-color:var(--ci);
    padding-left:.6rem;background:rgba(39,76,144,.06)}
  .nav .wrap{flex-wrap:wrap;gap:.7rem}
  /* Der Erstgespräch-Knopf steht unter dem Menü, nicht daneben —
     nebeneinander schiebt er die Zeile auf schmalen Geräten auf. */
  .nav > .wrap > .knopf{order:4;width:100%;text-align:center}
}