/*
Theme Name: Kreudertext
Theme URI: https://kreudertext.de
Author: Dietmar Kreuder
Description: Eigenstaendiges Theme fuer kreudertext.de. Kopfzeile, Fusszeile, Menue und Schriften kommen aus dem Theme selbst – ohne Theme Builder, ohne Elementor Pro, ohne Aufrufe zu Google. Die Seiteninhalte rendert weiterhin Elementor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kreudertext
Tags: custom-menu, translation-ready
*/

/* ==========================================================================
   1. Schriften – Lekton, selbst gehostet
   Genau die sechs Schnitte, die bisher ueber Elementor geladen wurden.
   Lekton gibt es nur in 400 und 700; die im Entwurf notierten 300, 500 und
   600 rechnet der Browser daraus hoch bzw. herunter – wie bisher auch.
   ========================================================================== */

@font-face {
  font-family: 'Lekton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lekton-szc43fdmlawmwpbuwb3p.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lekton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lekton-szc43fdmlawmwpbuvh3prum.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lekton';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lekton-szc73fdmlawmwpbm4zj8kmlw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lekton';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lekton-szc73fdmlawmwpbm4zj8nglw0di.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lekton';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lekton-szc63fdmlawmwpbuxs3rtuc.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lekton';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lekton-szc63fdmlawmwpbuxs3ltufr6q.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Stellschrauben
   Alle Werte, die woanders wieder auftauchen, stehen hier ein einziges Mal.
   ========================================================================== */

:root {
  --kt-schrift: 'Lekton', ui-monospace, 'Courier New', monospace;

  --kt-farbe-text: #7A7A7A;      /* Fliesstext, global */
  --kt-farbe-gedeckt: #54595F;   /* Menue, Links, Fusszeile */
  --kt-farbe-schwarz: #000000;   /* Titel, Menue aktiv */
  --kt-kopf-hintergrund: #FFFFFF;
  --kt-fuss-hintergrund: #f2f2f2;

  --kt-breite: 1140px;           /* Container, wie bisher in Elementor */
  --kt-menue-abstand: 25px;      /* Abstand zwischen zwei Menuepunkten */
  --kt-kopf-schatten: 0 0 38px 0 rgba(0, 0, 0, 0.1);

  /* Wird vom Skript auf die echte Kopfzeilenhoehe gesetzt. Der Startwert
     traegt, falls das Skript einmal nicht laeuft. */
  --kt-kopf-hoehe: 96px;
}

/* Sprungmarken duerfen nicht unter der klebenden Kopfzeile landen. */
html {
  scroll-padding-top: var(--kt-kopf-hoehe);
  scroll-behavior: smooth;
}

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

/* ==========================================================================
   3. Grundlagen
   ========================================================================== */

body.kt-theme {
  margin: 0;
  font-family: var(--kt-schrift);
  font-weight: 400;
  line-height: 1.5;   /* aus Hello-Theme uebernommen, das dieses Theme ersetzt */
  color: var(--kt-farbe-text);
  background: #fff;
}

.kt-theme img { max-width: 100%; height: auto; }

.kt-theme a { color: var(--kt-farbe-gedeckt); }

/* Sprungmarke fuer Tastaturbedienung – nur sichtbar, wenn angesprungen. */
.kt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: .75rem 1rem;
  background: #fff;
  color: #000;
}
.kt-skip:focus { left: 0; }

/* ==========================================================================
   4. Kopfzeile
   Werte uebernommen aus der bisherigen Vorlage 21.
   ========================================================================== */

.kt-kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kt-kopf-hintergrund);
  box-shadow: var(--kt-kopf-schatten);
  padding: 10px 0;
}

.kt-kopf__innen {
  max-width: var(--kt-breite);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0;
}

/* Wortmarke */
.kt-marke { flex: 0 1 auto; }

.kt-marke__titel {
  margin: 0;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1;
  color: var(--kt-farbe-schwarz);
}
/* !important wie urspruenglich in der Additional-CSS (".logo-text a
   {color:#000 !important;}"): Elementors eigene Kit-Regel
   ".elementor-kit-267 a" faerbt JEDEN Link auf der Seite grau (gleiche
   Spezifitaet, laedt aber nach diesem Stylesheet) und gewinnt sonst. */
.kt-marke__titel a {
  color: var(--kt-farbe-schwarz) !important;
  text-decoration: none;
}
.kt-marke__zusatz {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  color: var(--kt-farbe-schwarz);
  text-align: start;
}

/* ==========================================================================
   5. Hauptmenue
   ========================================================================== */

.kt-nav {
  flex: 1 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.kt-nav__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 0 calc(var(--kt-menue-abstand) / -2);
  padding: 0;
  list-style: none;
}

/* Je 12,5 px links und rechts ergeben 25 px zwischen zwei Punkten. Der
   negative Rand der Liste zieht die Aussenkanten wieder buendig an den
   Container – gemessen an der bisherigen Kopfzeile. */
.kt-nav__eintrag { margin: 0 calc(var(--kt-menue-abstand) / 2); }

.kt-nav__link {
  position: relative;
  display: block;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--kt-farbe-gedeckt);
  text-decoration: none;
}

/* Unterstrich faehrt beim Zeigen auf – entspricht dem bisherigen Verhalten. */
.kt-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--kt-farbe-schwarz);
  opacity: 0;
  transition: opacity .2s ease;
}
.kt-nav__link:hover::after,
.kt-nav__link:focus-visible::after { opacity: 1; }

.kt-nav__link:hover,
.kt-nav__link:focus-visible { color: var(--kt-farbe-schwarz); }

@media (prefers-reduced-motion: reduce) {
  .kt-nav__link::after { transition: none; }
}

/* Burger – erst ab Tablet sichtbar, wie bisher */
.kt-burger {
  display: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kt-farbe-schwarz);
  cursor: pointer;
  line-height: 0;
}
.kt-burger:hover,
.kt-burger:focus-visible { color: #7A7A7A; }
.kt-burger svg { width: 35px; height: 35px; fill: currentColor; }
.kt-burger__schliessen { display: none; }
.kt-burger[aria-expanded="true"] .kt-burger__oeffnen { display: none; }
.kt-burger[aria-expanded="true"] .kt-burger__schliessen { display: block; }

/* ==========================================================================
   6. Fusszeile
   Werte uebernommen aus der bisherigen Vorlage 120.
   ========================================================================== */

.kt-fuss {
  background: var(--kt-fuss-hintergrund);
  padding: 20px 0;
}

.kt-fuss__innen {
  max-width: var(--kt-breite);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}

.kt-fuss__spalte { flex: 1 1 50%; min-width: 0; }
.kt-fuss__spalte--rechts { text-align: right; }

.kt-fuss__liste {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.kt-fuss__eintrag { margin: 0 10px; }
.kt-fuss__eintrag a {
  font-weight: 500;
  line-height: 1.5;   /* 24px bei 16px – so umbricht die Zeile wie bisher */
  color: var(--kt-farbe-gedeckt);
  text-decoration: none;
}
.kt-fuss__eintrag a:hover,
.kt-fuss__eintrag a:focus-visible { text-decoration: underline; }

.kt-sozial {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
/* Der Selektor traegt bewusst .kt-theme mit: sonst gewinnt die allgemeine
   Regel ".kt-theme a" und die Symbole verlieren ihre Transparenz. */
.kt-theme .kt-sozial__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 10%;
  color: rgba(84, 89, 95, 0.73);
  background: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.kt-sozial__link svg { width: 21px; height: 21px; fill: currentColor; }
.kt-theme .kt-sozial__link:hover,
.kt-theme .kt-sozial__link:focus-visible {
  background: #FFFFFF;
  color: var(--kt-farbe-schwarz);
}

@media (prefers-reduced-motion: reduce) {
  .kt-theme .kt-sozial__link { transition: none; }
}

/* ==========================================================================
   7. Fliesstext-Links in Elementor-Textfeldern
   Diese zwei Regeln standen bisher im Feld "Custom CSS" der Site-Settings.
   Das ist ein Pro-Feld und verschwindet mit Pro – deshalb liegen sie jetzt
   hier im Theme.
   ========================================================================== */

/* color:#000 fehlte hier – beim Uebertragen aus der Additional-CSS nur die
   Unterstreichung mitgenommen, nicht die Farbe. !important noetig: gleiche
   Spezifitaet wie Elementors ".elementor-kit-267 a", die aber nach diesem
   Stylesheet laedt und sonst gewinnen wuerde. */
.elementor-widget-text-editor a { color: #000 !important; border-bottom: dotted 1px; }
.elementor-widget-text-editor a:hover { border-bottom: solid 1px; }

/* Listen in Fliesstext-Widgets: Gedankenstrich statt Aufzaehlungspunkt.
   Dieselbe historische Regel, nur mit dem heutigen Klassennamen
   (".elementor-text-editor" gibt es seit einer Elementor-Version nicht
   mehr – ".elementor-widget-text-editor" ist die aktuelle Huelle). */
.elementor-widget-text-editor ul { margin-left: 0; margin-bottom: -25px; }
.elementor-widget-text-editor li { line-height: 1.3em; list-style-type: none; }
.elementor-widget-text-editor li:before { content: "- "; }

/* Zwei weitere Regeln aus derselben Quelle. Bewusst NICHT unter .kt-inhalt,
   weil die Popups (u.a. die PDF-Kostproben) direkt im <body> haengen, nicht
   im Seiteninhalt – die Regel muss sie also global erreichen. */
.elementor iframe { height: 80vh !important; }
.kontakt-slider img { max-height: 400px; }

/* ==========================================================================
   8. Inhaltsbereich fuer Seiten ohne Elementor
   ========================================================================== */

.kt-inhalt {
  max-width: var(--kt-breite);
  margin: 0 auto;
  padding: 0 20px;
}
/* !important wie in der urspruenglichen Regel: Elementors eigenes
   .elementor-widget-heading .elementor-heading-title ist zwei Klassen
   stark und schlaegt sonst das Gewicht dieser Regel. */
.kt-inhalt h1 { font-size: 3em; font-weight: 700 !important; color: var(--kt-farbe-schwarz); }
.kt-inhalt h2 { font-size: 2.5em; font-weight: 700 !important; color: var(--kt-farbe-schwarz); }
.kt-inhalt h3 { font-size: 1.5em; font-weight: 400 !important; margin-top: 0; }
.kt-inhalt p  { font-weight: 500; line-height: 1.4em;}

/* ==========================================================================
   9. Breakpoints – dieselben Schwellen wie bisher in Elementor
   ========================================================================== */

@media (max-width: 1024px) {
  .kt-kopf { padding: 20px; }
  .kt-kopf__innen { flex-wrap: nowrap; }
  .kt-marke { width: 80%; }

  .kt-burger { display: block; }

  /* Menue faehrt unter der Kopfzeile auf */
  .kt-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: #f7f7f7;
    box-shadow: var(--kt-kopf-schatten);
  }
  .kt-kopf.is-menue-offen .kt-nav { display: block; }

  .kt-nav__liste {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }
  .kt-nav__eintrag { margin: 0; }
  .kt-nav__link {
    padding: 10px 20px;
    font-weight: 500;
  }
  .kt-nav__link::after { display: none; }
  .kt-nav__link:hover,
  .kt-nav__link:focus-visible {
    background: var(--kt-farbe-schwarz);
    color: #FFFFFF;
  }

  .kt-fuss { padding: 30px 20px; }
  .kt-sozial { gap: 10px; }
}

@media (max-width: 767px) {
  .kt-kopf { padding: 10px 15px 10px 20px; }
  .kt-marke { width: 80%; padding-right: 30px; box-sizing: border-box; }

  /* Der Titel bleibt auch auf dem Handy bei 40px – nachgemessen an der
     bisherigen Kopfzeile, die dort ebenfalls 76px hoch ist. */

  .kt-nav { margin-top: 20px; }

  .kt-fuss { padding: 25px 20px; }
}

/* ==========================================================================
   10. Popups – Ersatz fuer Elementor Pros Popup Builder
   Werte 1:1 aus den bisherigen Popup-Vorlagen (192/215/239/235/242/245/310
   fuer die PDFs, 271 fuer den Cookie-Hinweis) uebernommen, Stand 24.08.2026.
   ========================================================================== */

/* box-sizing:border-box, damit der Rahmen zur angegebenen Breite dazu
   zaehlt statt sie zu vergroessern – bei content-box wuerde die Box
   100vw + 100px Rahmen breit, also beidseitig ueber den Bildschirmrand
   hinauslaufen und dort unsichtbar abgeschnitten werden. */
/* WICHTIG: display:flex nur bei [open]. Ohne diese Einschraenkung
   ueberschreibt die Regel Browsers eigene Grundregel
   "dialog:not([open]) { display:none }", wodurch alle sieben Popups
   dauerhaft sichtbar am Seitenende haengen statt nur beim Oeffnen. */
dialog.kt-popup {
  box-sizing: border-box;
  border: 50px solid #fff;
  background: #54595F;
  min-height: 88vh;
  width: 100vw;
  max-width: 100vw;   /* Chrome bringt fuer <dialog> eine eigene, engere
                         max-width mit – ohne diese Zeile schlaegt sie
                         vor allem auf dem Handy durch. */
  padding: 0;
  position: relative;
}
dialog.kt-popup[open] {
  /* Der Rahmen ist der Flex-Container: .kt-pdf wird darin ueber flex:1
     auf die volle Hoehe gestreckt (statt einer festen min-height auf
     .kt-pdf, die mit fester Iframe-Hoehe zusammen mehr Platz brauchte
     als vorhanden war – daher der abgeschnittene Text). */
  display: flex;
  flex-direction: column;
}
dialog.kt-popup::backdrop { background: rgba(0, 0, 0, .8); }

dialog.kt-popup .kt-pdf {
  flex: 1 1 auto;
  min-height: 0;   /* erlaubt dem iframe darunter, sich einzuordnen statt
                       zu ueberlaufen – der klassische Flexbox-Kniff */
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* iframe waechst/schrumpft mit dem verfuegbaren Platz, statt eine feste
   Hoehe zu beanspruchen. Bisher stand hier "height:80vh !important" –
   zusammen mit der Bildunterschrift ergab das mehr als die verfuegbaren
   88vh, wodurch der Text am unteren Rand abgeschnitten wurde. Jetzt
   nimmt der iframe automatisch genau das, was nach Uebeschrift/Knopf
   uebrig bleibt. */
dialog.kt-popup .kt-pdf iframe {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Diese drei Regeln standen bisher nur in der separaten kt-pdf.css fuer
   das Customizer-Feld "Zusaetzliches CSS" – genau das Feld, das beim
   Wechsel auf dieses Theme verwaist. Der Dialog selbst hat keine
   Textfarbe geerbt, deshalb erschien der Hinweistext schwarz auf dem
   dunkelgrauen Grund statt weiss. Jetzt fest im Theme, zentriert. */
dialog.kt-popup { color: #fff; }

.kt-pdf__pages {
  flex: 0 0 auto;   /* behaelt immer ihre natuerliche Groesse, egal wie
                       viel oder wenig Platz der iframe daneben bekommt */
  margin: .6rem 0 0;
  font-size: .9rem;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}

.kt-pdf__button {
  display: none;
  margin: 2rem auto;
  padding: 1rem 1.6rem;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.3;
  text-align: center;
}
.kt-pdf__button:hover,
.kt-pdf__button:focus-visible { background: #fff; color: #54595F; }
.kt-pdf__hint { display: block; margin-top: .4rem; font-size: .85rem; opacity: .85; }

/* Android Chrome zeigt eingebettete PDFs in einem iframe gar nicht,
   iOS Safari nur die erste Seite – deshalb dort der grosse Button statt
   des Rahmens, wie schon bei der urspruenglichen Loesung. */
@media (max-width: 767px) {
  dialog.kt-popup .kt-pdf iframe,
  dialog.kt-popup .kt-pdf__pages { display: none; }
  .kt-pdf__button { display: inline-block; }
}

/* Sitzt im weissen 50px-Rahmen selbst (negativer Versatz von der
   Innenkante des Rahmens aus nach aussen), nicht mehr auf dem dunklen
   Rand und ohne Kreis dahinter – der Rahmen liefert genug Kontrast fuer
   ein dunkles Icon von sich aus. */
/* Negativer Versatz (ausserhalb der Innenkante, im weissen Rahmen) wurde
   vom Dialog selbst abgeschnitten – <dialog> beschneidet offenbar alles,
   was ueber seine Innenkante hinausragt. Deshalb jetzt bewusst INNERHALB
   positioniert, mit eigenem weissem Hintergrund: das ergibt optisch
   denselben "auf dem weissen Rahmen"-Eindruck, ohne Beschneidungsrisiko. */
.kt-popup__schliessen {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #fff;
  color: #000;
  cursor: pointer;
}
.kt-popup__schliessen svg { width: 30px; height: 30px; fill: currentColor; }
.kt-popup__schliessen:hover,
.kt-popup__schliessen:focus-visible { color: #54595F; }

@media (max-width: 1024px) {
  dialog.kt-popup { min-height: 91vh; }
}

@media (max-width: 767px) {
  dialog.kt-popup {
    border-width: 20px;
    min-height: 94vh;
    margin-top: 0;   /* dockt oben an, wie zuvor */
  }
  .kt-popup__schliessen { width: 36px; height: 36px; }
  .kt-popup__schliessen svg { width: 24px; height: 24px; }
}

/* Cookie-Hinweis: voller Breite, unten angedockt. */
dialog.kt-cookie {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  border: 0;
  background: #000;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  box-sizing: border-box;
}
dialog.kt-cookie::backdrop { background: rgba(0, 0, 0, .4); }

.kt-cookie__innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.kt-cookie__text {
  flex: 1 1 60%;
  max-width: 70%;
  margin: 0;
  font-size: 21px;
  font-weight: 300;
  color: #fff;
  text-align: center;
}

.kt-cookie__ok {
  flex: 0 0 auto;
  border: 0;
  border-radius: 150px;
  background: #fff;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 40px;
  cursor: pointer;
}
.kt-cookie__ok:hover,
.kt-cookie__ok:focus-visible { background: #7A7A7A; color: #fff; }

@media (max-width: 767px) {
  .kt-cookie__text { font-size: 13px; text-align: start; }
  .kt-cookie__ok { font-size: 13px; padding: 10px 25px; }
}