/* ============================================================================
   B-Kö Smiles — Keytos-Rahmen für die gespiegelten Unterseiten
   ----------------------------------------------------------------------------
   Kopfleiste, Mobilmenü, Anfrageformular und Fußzeile stammen 1:1 aus
   bkoesmiles/vorschau/index.html. Alles ist unter `.ktc` gekapselt, damit
   Elementor und unsere Regeln sich nicht ins Gehege kommen.

   ⚠️ Das Reskin-CSS der Spiegelseiten setzt `body div/p/span/a{font-family:
   Manrope!important}`. Ohne eigenes !important bei font-family verliert jede
   Serifenschrift hier. Deshalb steht es an genau den Stellen — nicht aus Faulheit.

   Erzeugt/gepflegt von bkoesmiles/vorschau/_build/chrome.py
   ========================================================================== */

.ktc{
  --ink:#000000; --ink-2:#0e0e0e; --ink-3:#181818;
  --gold:#c5a56a; --gold-soft:#dcc08a; --gold-deep:#a9854b; --gold-bright:#e6cf95;
  --line:rgba(197,165,106,.26);
  --text:#cbc5ba; --muted:#8a8478; --white:#f6f4ef;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1280px;
  font-family:var(--sans);
  line-height:1.65;
}
.ktc *{box-sizing:border-box}
.ktc a{color:inherit;text-decoration:none}
/* ⚠️ Das WordPress-Theme der Spiegelseiten setzt Links, Knöpfe und Überschriften
   auf `text-transform:uppercase`. Gemessen: Hauptseite `none`, Spiegelseite
   `uppercase` — der Rahmen sah dadurch überall geschrien aus („ÜBER UNS",
   „IMPRESSUM · DATENSCHUTZ"). Hier zurückgedreht; wer Versalien will, sagt es
   ausdrücklich (Eyebrow, Signet). */
.ktc,.ktc *{text-transform:none!important}
.ktc .eyebrow,.ktc .signet b{text-transform:uppercase!important}
/* display:block ausdrücklich — auf den eigenen Textseiten gibt es ein
   `.mono .pbody .wrap`-Raster; ohne das hier erbt der Formularblock es mit. */
.ktc .wrap{display:block;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.ktc .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans)!important}

/* ---------- Knöpfe ---------- */
.ktc .btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans)!important;font-weight:600;font-size:15px;
  letter-spacing:.01em;cursor:pointer;border:0;border-radius:999px;padding:15px 28px;transition:.25s ease;text-align:center}
.ktc .btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#241a0a!important;
  box-shadow:0 10px 30px -12px rgba(197,165,106,.6)}
.ktc .btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(197,165,106,.78);color:#241a0a!important}
.ktc .btn .ar{transition:transform .25s ease}
.ktc .btn:hover .ar{transform:translateX(4px)}

/* ---------- Kopfleiste ----------
   Bewusst `sticky` statt `fixed` wie auf der Startseite: die 47 Spiegelseiten
   haben unterschiedlich hohe Heros, ein fixierter Balken würde auf den kurzen
   Seiten den ersten Inhalt verdecken. Sticky nimmt Platz ein und schiebt.
   Das löst zugleich Fritz' Befund „Logo liegt ohne Hintergrund auf dem Text". */
header.ktc.hdr{position:sticky;top:0;z-index:800;
  background:rgba(0,0,0,.92);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border-bottom:1px solid var(--line);padding:14px 0}
header.ktc.hdr .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ktc .brand{display:flex;align-items:center;gap:11px}
.ktc .brand img{width:42px;height:42px;border-radius:0!important;border:0!important;box-shadow:none!important;background:none!important}
.ktc .brand .name{font-family:var(--serif)!important;font-size:21px;color:var(--white);letter-spacing:.01em;white-space:nowrap}
.ktc .brand .name b{color:var(--gold);font-weight:inherit}

/* ---------- Mega-Menü (Desktop) ---------- */
.ktc .nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px)}
.ktc .nav-item{position:relative}
.ktc .nav-item>a{font-family:var(--sans)!important;font-size:13.5px;font-weight:500;color:var(--text);letter-spacing:.01em;
  padding:8px 0;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.ktc .nav-item>a .caret{width:8px;height:8px;opacity:.7;transition:transform .25s ease}
.ktc .nav-item>a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--gold);transition:width .25s ease}
.ktc .nav-item:hover>a,.ktc .nav-item:focus-within>a{color:var(--white)}
.ktc .nav-item:hover>a::after,.ktc .nav-item:focus-within>a::after{width:100%}
.ktc .nav-item:hover>a .caret,.ktc .nav-item:focus-within>a .caret{transform:rotate(180deg)}
.ktc .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:rgba(12,12,12,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:16px;padding:14px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;box-shadow:0 30px 70px -24px rgba(0,0,0,.8);z-index:90}
.ktc .mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.ktc .nav-item:hover .mega,.ktc .nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ktc .mega.wide{left:auto;right:0;transform:translateX(0) translateY(8px);min-width:520px}
.ktc .nav-item:hover .mega.wide,.ktc .nav-item:focus-within .mega.wide{transform:translateX(0) translateY(0)}
.ktc .mega .mega-cols{display:grid;grid-template-columns:1fr;gap:2px}
.ktc .mega.wide .mega-cols{grid-template-columns:1fr 1fr;gap:2px 22px}
.ktc .mega a{display:block;font-family:var(--sans)!important;font-size:13px;color:var(--text);padding:8px 12px;
  border-radius:9px;letter-spacing:.01em;line-height:1.3;transition:background .18s ease,color .18s ease}
.ktc .mega a:hover{background:rgba(197,165,106,.12);color:var(--white)}
.ktc .mega .mega-head{font-family:var(--serif)!important;font-style:italic;color:var(--gold-soft);font-size:12px;padding:6px 12px 8px;letter-spacing:.02em}
header.ktc .btn-gold{padding:11px 22px;white-space:nowrap}
.ktc .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:70}
.ktc .burger span{width:24px;height:2px;background:var(--white);transition:.3s;display:block}
.ktc .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ktc .burger.x span:nth-child(2){opacity:0}
.ktc .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1180px){.ktc .nav-item>a{font-size:12.5px}}

/* ---------- Mobilmenü ---------- */
nav.ktc.mmenu{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.99);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:block;overflow-y:auto;padding:96px 22px 40px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
nav.ktc.mmenu.open{opacity:1;visibility:visible}
.ktc .mgroup{border-bottom:1px solid rgba(197,165,106,.16)}
.ktc .mgroup>a,.ktc .mgroup>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;cursor:pointer;text-align:left;font-family:var(--serif)!important;font-size:22px;color:var(--white);padding:16px 2px}
.ktc .mgroup>button .mc{width:14px;height:14px;color:var(--gold);transition:transform .25s ease;flex:none}
.ktc .mgroup.open>button .mc{transform:rotate(45deg)}
.ktc .msub{max-height:0;overflow:hidden;transition:max-height .35s ease}
.ktc .mgroup.open .msub{max-height:900px}
.ktc .msub a{display:block;font-family:var(--sans)!important;font-size:15px;color:var(--text);padding:9px 2px 9px 14px}
.ktc .msub a:hover{color:var(--gold-soft)}
nav.ktc.mmenu .btn-gold{margin-top:24px;font-family:var(--sans)!important;font-size:16px;width:100%;justify-content:center}
@media(max-width:900px){
  .ktc .nav,header.ktc .btn-gold{display:none}
  .ktc .burger{display:flex}
}

/* ---------- Anfrage-Abschnitt ---------- */
section.ktc.anfrage{background:var(--ink);border-top:1px solid var(--line);padding:clamp(56px,7vw,92px) 0}
.ktc .anfrage-inner{max-width:860px;margin:0 auto}
.ktc .anfrage-head{text-align:center;margin-bottom:clamp(26px,3vw,38px)}
.ktc .anfrage-head h2{font-family:var(--serif)!important;font-size:clamp(28px,4vw,42px);color:var(--white);
  line-height:1.15;margin:14px 0 0;font-weight:500}
.ktc .anfrage-head p{color:var(--muted);font-size:15.5px;margin-top:12px;font-family:var(--sans)!important}
.ktc .form{background:var(--ink-2);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3.5vw,42px)}
.ktc .form .fh{margin-bottom:22px}
.ktc .form .fh h3{font-family:var(--serif)!important;font-size:clamp(21px,2.4vw,27px);color:var(--white);font-weight:500;margin:0}
.ktc .form .fh p{color:var(--muted);font-size:14.5px;margin-top:8px}
.ktc .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ktc .frow>*{min-width:0}
.ktc .field{margin-bottom:17px}
.ktc .field label{display:block;font-family:var(--sans)!important;font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.ktc .field label .req,.ktc .checkfield legend .req{color:var(--gold)}
.ktc fieldset.checkfield{border:0;padding:0;margin:0 0 17px;min-width:0}
.ktc .checkfield legend{padding:0;font-family:var(--sans)!important;font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.ktc .checkfield legend .opt{opacity:.7}
.ktc .checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
.ktc .optcheck{display:flex;gap:10px;align-items:center;cursor:pointer;background:var(--ink-3);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;font-family:var(--sans)!important;font-size:14px;color:var(--text);line-height:1.35;
  transition:border-color .2s ease,color .2s ease;margin:0}
.ktc .optcheck:hover{border-color:rgba(197,165,106,.5)}
.ktc .checkfield .optcheck input{width:18px;height:18px;flex:none;margin:0;padding:0;accent-color:var(--gold)}
.ktc .optcheck:has(input:checked){border-color:var(--gold);color:var(--white)}
.ktc .field input,.ktc .field select,.ktc .field textarea{width:100%;background:var(--ink-3);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;color:var(--white);font-family:var(--sans)!important;font-size:15px;transition:border-color .2s ease}
.ktc .field input::placeholder,.ktc .field textarea::placeholder{color:#6b665c}
.ktc .field input:focus,.ktc .field select:focus,.ktc .field textarea:focus{border-color:var(--gold)}
.ktc .field input:focus:not(:focus-visible),.ktc .field select:focus:not(:focus-visible),.ktc .field textarea:focus:not(:focus-visible){outline:none}
.ktc .field textarea{resize:vertical;min-height:120px}
.ktc .field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23c5a56a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
/* ⚠️ NICHT auf `display:flex` umstellen: die Beschriftung besteht aus Textknoten
   UND einem <a>. In einem Flex-Container wird jeder Textlauf ein eigenes
   anonymes Flex-Element — die Zeile zerfällt sichtbar in drei Spalten
   („Ich habe die" | Link | „gelesen und willige…"). Deshalb Fluss-Layout mit
   absolut gesetztem Kästchen. */
.ktc .check{display:block;position:relative;padding-left:29px;margin-bottom:13px;
  font-family:var(--sans)!important;font-size:13px;color:var(--muted);line-height:1.45;cursor:pointer}
.ktc .check input{position:absolute;left:0;top:2px;width:18px;height:18px;margin:0;accent-color:var(--gold)}
.ktc .check a{color:var(--gold-soft);text-decoration:underline}
.ktc .form .btn{width:100%;justify-content:center;margin-top:12px}
.ktc .form .hint{font-family:var(--sans)!important;font-size:12px;color:var(--muted);margin-top:14px;text-align:center}
.ktc .acute{display:flex;gap:11px;align-items:center;background:rgba(197,165,106,.08);border:1px solid var(--line);
  border-radius:12px;padding:12px 15px;margin-bottom:17px;font-family:var(--sans)!important;font-size:13px;color:var(--text)}
.ktc .acute svg{width:20px;height:20px;color:var(--gold);flex:none}
.ktc .acute a{color:var(--gold-soft);font-weight:600;white-space:nowrap}
.ktc .form.sent .form-body{display:none}
.ktc .form-ok{display:none;text-align:center;padding:20px 0}
.ktc .form.sent .form-ok{display:block}
.ktc .form-ok .ok-ic{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold)}
.ktc .form-ok h3{font-family:var(--serif)!important;font-size:24px;margin-bottom:8px;color:var(--white);font-weight:500}
.ktc .form-ok p{color:var(--muted);font-size:15px;font-family:var(--sans)!important}
@media(max-width:520px){
  .ktc .frow{grid-template-columns:1fr}
  .ktc .checkgrid{grid-template-columns:1fr}
}

/* ---------- Fußzeile ---------- */
footer.ktc.ft{background:var(--ink);border-top:1px solid var(--line);padding:clamp(46px,6vw,66px) 0 36px}
.ktc .ft-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.ktc .ft-nav{display:flex;gap:26px;flex-wrap:wrap}
.ktc .ft-nav a{font-family:var(--sans)!important;font-size:14px;color:var(--muted);transition:color .2s ease}
.ktc .ft-nav a:hover{color:var(--gold-soft)}
.ktc .signet{font-family:var(--serif)!important;font-style:italic;font-size:13px;color:var(--gold-soft);line-height:1.25;text-align:right;opacity:.9}
.ktc .signet b{display:block;font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-family:var(--sans)!important}
.ktc .ft-social{display:flex;gap:12px;align-items:center}
.ktc .ft-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;
  align-items:center;justify-content:center;color:var(--muted);transition:.2s ease}
.ktc .ft-social a:hover{color:var(--gold-soft);border-color:var(--gold);transform:translateY(-2px)}
.ktc .ft-social svg{width:17px;height:17px}
.ktc .ft-base{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-family:var(--sans)!important;font-size:12.5px;color:var(--muted);align-items:center}
.ktc .ft-base a:hover{color:var(--gold-soft)}
@media(max-width:560px){
  .ktc .ft-top{flex-direction:column;align-items:flex-start;gap:22px}
  .ktc .signet{text-align:left}
}

/* ---------- Bewegung dämpfen, nicht einfrieren ---------- */
@media(prefers-reduced-motion:reduce){
  .ktc .btn,.ktc .mega,.ktc .msub,nav.ktc.mmenu{transition-duration:.01ms}
  .ktc .btn:hover,.ktc .ft-social a:hover{transform:none}
}

/* Cloudflare-Türsteher im Anfrageformular */
.ktc .ktc-ts{margin:12px 0 0;display:flex;justify-content:center}

/* Honigtopf — für Menschen unsichtbar, für Bots verlockend */
.ktc .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Absenden: weicher Übergang statt Sprung (Fritz, 04.08.2026) ----------
   Ursache des Rucks: mit `.sent` verschwand der Formularkörper schlagartig, die
   Seitenhöhe brach um mehrere hundert Pixel zusammen und der Browser stand
   plötzlich woanders — danach zog ein hartes scrollIntoView den Blick weg.
   Jetzt wird die Höhe beim Umschalten festgehalten und auf die neue Höhe
   heruntergefahren; der Dank blendet dabei auf. */
.ktc .form{transition:height .45s cubic-bezier(.4,0,.2,1)}
.ktc .form-body{transition:opacity .22s ease,transform .22s ease}
.ktc .form.sending .ktc .form-body{opacity:.35;transform:scale(.995);pointer-events:none}
.ktc .form.sent .ktc .form-ok{animation:bkOkIn .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes bkOkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ktc .form.sent .ok-ic{animation:bkOkPop .55s cubic-bezier(.2,1.25,.4,1) .06s both}
@keyframes bkOkPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.ktc .form.sent .ok-ic svg path{stroke-dasharray:34;stroke-dashoffset:34;animation:bkOkDraw .5s ease .28s forwards}
@keyframes bkOkDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .ktc .form,.ktc .form-body{transition:none}
  .ktc .form.sent .ktc .form-ok,.ktc .form.sent .ok-ic{animation:none}
  .ktc .form.sent .ok-ic svg path{animation:none;stroke-dashoffset:0}
}


/* ---------------------------------------------------------------------------
   Lana (05.08.2026, 16:08): „Können wir diese Textfelder, die übereinander
   ziehen, auch farblich voneinander abheben? Vllt 3D Kästen?"

   Befund: Auf den gespiegelten Seiten laufen die Abschnitte ohne sichtbare
   Grenze ineinander — links die Überschrift, rechts der Text, und der nächste
   Abschnitt beginnt ohne Zäsur. Man sieht nicht, wo einer endet.

   Bewusst KEINE bunten 3D-Kästen: das Design ist auf ruhiges Schwarz-Gold
   gebaut, plastische Kästen würden es billig aussehen lassen. Stattdessen
   Tiefe mit den Mitteln, die die Marke schon hat — ein feiner Gold-Verlauf als
   Trennlinie zwischen den Abschnitten, und für die bereits gerahmten Kästen
   eine leichte Erhebung (Verlauf + Schatten + Lichtkante oben).
   Ob es doch kräftiger werden soll, entscheiden Fritz und Melike. --------- */

/* Die Gold-Zäsur zwischen Abschnitten wurde am 05.08.2026 wieder entfernt:
   die Regel traf jede verschachtelte Sektion, nicht die äußeren. Die Linien
   schnitten quer durchs Layout und endeten mitten in der Fläche. Wer es
   erneut versucht, muss die ÄUSSERSTE Sektionsebene treffen — im
   Elementor-Spiegel ist die nicht an der Klasse erkennbar. */

/* Die gerahmten Kästen bekommen Tiefe statt nur Umriss */
.elementor-widget-container > div[style*="border"],
.bk-card, .bk-box, .elementor-widget-text-editor .p1{}
[class*="elementor-widget"] > .elementor-widget-container:has(> p.p1){
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 62%);
  border:1px solid rgba(197,165,106,.22);
  border-top-color:rgba(197,165,106,.4);      /* Lichtkante oben */
  border-radius:14px;padding:18px 20px;
  box-shadow:0 18px 34px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
@media(prefers-reduced-motion:no-preference){
  [class*="elementor-widget"] > .elementor-widget-container:has(> p.p1){
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  [class*="elementor-widget"] > .elementor-widget-container:has(> p.p1):hover{
    border-color:rgba(197,165,106,.44);
    box-shadow:0 22px 40px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  }
}

/* Lesereihenfolge geradeziehen (Befund 05.08.2026).
   Auf fünf Spiegelseiten stand der einleitende Satz („… bieten wir:") in der
   RECHTEN Spalte und die dazugehörige Aufzählung in der LINKEN. Man las also
   erst die Liste und erfuhr danach, worum es geht. Auf der Live-Seite stehen
   beide untereinander — der Bruch entstand erst beim Spiegeln.
   Diese Sektionen werden gestapelt; dann folgt die Anzeige der Dokument-
   reihenfolge und stimmt automatisch. */
/* Wirkt nur, wo die markierte Sektion tatsächlich zwei Spalten führt.
   Auf mehreren Seiten war der vermutete „Spaltenbruch" nur eine andere
   Einrückung — dort ändert die Regel nichts, und das ist richtig so. */
.ktc-stapel > .elementor-container,
.ktc-stapel.e-con,
.ktc-stapel > .e-con-inner{flex-direction:column!important;flex-wrap:nowrap!important}
.ktc-stapel > .elementor-container > .elementor-column,
.ktc-stapel > .e-con-inner > .e-con{width:100%!important;max-width:100%!important}