/*
Theme Name:   WENIAN Child
Theme URI:    https://www.wenian.ch
Description:  Child-Theme fuer Divi mit dem Auftritt von WENIAN Hundetraining —
              Nicole Bourzeis, zertifizierte Hundetrainerin. Fell, Bernsteinglut,
              Cinzel und EB Garamond, heller und dunkler Auftritt.
Author:       Roland Udry
Template:     Divi
Version:      1.2.0
Text Domain:  wenian-child
*/

/* ============================================================
   Alles liegt im Namensraum .wenian, damit nichts in Divi
   hineinregiert. Das Seitentemplate wickelt den Inhalt in
   <div class="wenian">; wer stattdessen mit dem Divi-Builder
   baut, setzt diese Klasse auf die Sektionen der Seite.
   ============================================================ */


@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/ebgaramond.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}

/* ---------- Farben: helles Bernstein-Papier ---------- */
.wenian{
  --grund:#f8efdf; --flaeche:#f8efdf; --tief:#f8efdf; --sockel:#1c1409;
  --kachel:#fdf8ee;
  --text:#33251a; --weich:#6d5540; --titel:#3d2a1a;
  --bernstein:#b0600c; --bernstein-voll:#e2801c; --glut:#fac060;
  --linie:rgba(176,96,12,.36); --schatten:rgba(61,42,26,.16);
  --medaillon-ring:#f8efdf; --schein:0; --schein2:0; --aura:.36;
  --titel-f:'Cinzel',serif; --lese:'EB Garamond',Georgia,serif; --ui:'Inter',system-ui,sans-serif;
  --rand:clamp(20px,5vw,64px);
  --kopf-luft:clamp(40px,5.2vw,74px); --med-halb:clamp(93px,13vw,150px);
  color-scheme:light;
}
/* ---------- Farben: dunkles Fell ---------- */
.wenian[data-theme="dunkel"]{
  --grund:#231910; --flaeche:#231910; --tief:#231910; --sockel:#231910;
  --kachel:#2c2117;
  --text:#f2e7d4; --weich:#c0a887; --titel:#f9f1e2;
  --bernstein:#f0a445; --bernstein-voll:#e2801c; --glut:#fac060;
  --linie:rgba(250,192,96,.3); --schatten:rgba(0,0,0,.6);
  --medaillon-ring:#17110b; --schein:0; --schein2:0; --aura:.46;
  color-scheme:dark;
}
.wenian, .wenian *{box-sizing:border-box;margin:0;padding:0}
.wenian{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.wenian{font-family:var(--lese);background:var(--grund);color:var(--text);
  font-size:clamp(17px,1.05rem + .25vw,20px);line-height:1.64;
  transition:background .3s ease,color .3s ease}
/* Kein overflow-x:hidden auf dem Wrapper — das macht ihn zum Scroll-Container
   und bricht sticky-Elemente von Divi. Es laeuft ohnehin nichts ueber. */
/* Waerme aus Licht: im hellen Auftritt ein sehr weiter Bernsteinschein von oben,
   im dunklen stattdessen eine feine Bernsteinkante — eine Farbwolke auf Braun
   wirkt schmutzig, eine Lichtkante gliedert. */
.wenian .warm{position:relative;background-color:var(--grund);
  background-image:radial-gradient(ellipse 130% 70% at 50% -12%,
    rgba(226,128,28,var(--schein2)) 0%,
    rgba(226,128,28,calc(var(--schein2) * .45)) 34%,
    rgba(226,128,28,calc(var(--schein2) * .12)) 58%, transparent 80%)}
.wenian .hell.warm{background-color:var(--flaeche)}

.wenian img{display:block;max-width:100%;height:auto}
.wenian h1, .wenian h2, .wenian h3{font-family:var(--titel-f);font-weight:700;line-height:1.16;
  letter-spacing:.03em;color:var(--titel)}
.wenian em{font-style:italic;color:var(--bernstein)}
.wenian .name{font-weight:700;font-style:normal;color:var(--bernstein)}
.wenian .wrap{width:min(1120px,100% - 2*var(--rand));margin-inline:auto}
.wenian .breit{width:min(1290px,100% - 2*var(--rand));margin-inline:auto}
.wenian .eng{width:min(700px,100% - 2*var(--rand));margin-inline:auto}
.wenian section{padding-block:clamp(54px,7vw,104px)}
.wenian h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem);margin-bottom:.6em}
.wenian h3{font-size:clamp(1.1rem,1rem + .5vw,1.32rem);letter-spacing:.05em}
.wenian p+p{margin-top:.9em}

/* ---------- wiederkehrende Bausteine ---------- */
.wenian .zeile{display:flex;align-items:center;justify-content:center;gap:1em;flex-wrap:wrap;
  font-family:var(--ui);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  font-size:clamp(12.5px,.7rem + .42vw,18px);line-height:1.5}
.wenian .zeile span{text-indent:.26em}
.wenian .zeile i{width:5px;height:5px;border-radius:50%;background:var(--bernstein-voll);flex:none}
.wenian .vorspann{font-family:var(--ui);font-weight:600;font-size:clamp(11px,.68rem + .12vw,13px);
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--bernstein);
  margin-bottom:.85em}
.wenian .mitte .vorspann{text-align:center}
.wenian .knopf{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ui);font-weight:600;
  font-size:.92rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:.95em 1.8em;border-radius:3px;background:var(--bernstein-voll);color:#1c1108;
  box-shadow:0 6px 18px -8px rgba(226,128,28,.7);
  transition:transform .18s ease,filter .18s ease}
.wenian .knopf:hover{filter:brightness(1.08);transform:translateY(-1px)}
.wenian .knopf.leer{background:transparent;border:1px solid var(--bernstein);color:var(--bernstein);
  box-shadow:none}

/* ---------- Schalter hell/dunkel ---------- */
.wenian .schalter{position:fixed;top:14px;right:14px;z-index:60;display:flex;align-items:center;gap:8px;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:color-mix(in srgb,var(--flaeche) 88%,transparent);color:var(--weich);
  border:1px solid var(--linie);border-radius:999px;padding:7px 14px 7px 11px;cursor:pointer;
  backdrop-filter:blur(8px);box-shadow:0 6px 18px -10px var(--schatten);
  transition:color .2s,border-color .2s}
.wenian .schalter:hover{color:var(--bernstein);border-color:var(--bernstein)}
.wenian .schalter svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;flex:none}
.wenian .schalter .mond{display:none}
.wenian[data-theme="dunkel"] .schalter .sonne{display:none}
.wenian[data-theme="dunkel"] .schalter .mond{display:block}
@media (max-width:560px){.wenian .schalter span{display:none}.wenian .schalter{padding:9px}}

/* ---------- Kopf: Fellband mit Wortmarke, Medaillon, Titel ---------- */
.wenian .band{position:relative;
  background:#120c07 url('assets/img/fell_bernstein.jpg') center 34%/cover no-repeat;
  isolation:isolate}
.wenian .band::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgba(12,8,4,.5), rgba(12,8,4,.26) 34%,
             rgba(12,8,4,.34) 70%, rgba(12,8,4,.56))}
.wenian .bandinhalt{text-align:center;
  padding:var(--kopf-luft) var(--rand) calc(var(--kopf-luft) + var(--med-halb))}
.wenian .band .zeile{color:rgba(250,242,226,.96);margin-bottom:clamp(20px,3vw,34px);
  text-shadow:0 1px 10px rgba(10,6,3,.9), 0 0 22px rgba(226,128,28,.45)}
.wenian .band .zeile i{background:var(--glut);box-shadow:0 0 8px rgba(250,192,96,.8)}

/* Wortmarke leuchtet wie der Satz auf der Karte: heller Kern, dunkle Trennung,
   darum ein bernsteinfarbener Lichtsaum. */
.wenian .glut{color:#fdf7ea;
  text-shadow:0 0 3px rgba(10,6,3,.92), 0 3px 16px rgba(10,6,3,.88),
              0 0 26px rgba(238,146,40,.80), 0 0 62px rgba(226,128,28,.52)}
.wenian .band h1{display:inline-block;font-size:clamp(2.5rem,1.2rem + 5.8vw,5.2rem);
  letter-spacing:clamp(.11em,.03em + 1.3vw,.23em);
  text-indent:clamp(.11em,.03em + 1.3vw,.23em)}
.wenian .band .sub{display:inline-block;font-family:var(--titel-f);font-weight:700;
  color:#fce5b4;font-size:clamp(.98rem,.7rem + 1vw,1.7rem);
  letter-spacing:.34em;text-indent:.34em;margin-top:.5em;white-space:nowrap;
  text-shadow:0 0 3px rgba(10,6,3,.92), 0 2px 12px rgba(10,6,3,.9),
              0 0 22px rgba(238,146,40,.72), 0 0 48px rgba(226,128,28,.45)}

.wenian .medaillon{position:relative;z-index:2;width:calc(2 * var(--med-halb));aspect-ratio:1;
  margin:calc(-1 * var(--med-halb)) auto 0;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 clamp(6px,.85vw,10px) var(--medaillon-ring),
             0 0 0 calc(clamp(6px,.85vw,10px) + 2.5px) var(--bernstein-voll),
             0 0 46px 6px rgba(226,128,28,var(--aura)),
             0 0 120px 26px rgba(226,128,28,calc(var(--aura) * .55)),
             0 22px 50px -18px var(--schatten);
  transition:box-shadow .3s ease}
/* Das Bild ist die Pfote der Kartenvorderseite, mittig auf dem Fell derselben
   Vorlage — Originalglut, kein Nachbau. */
.wenian .medaillon img{width:100%;height:100%;object-fit:cover}

.wenian .titelblock{text-align:center;padding:clamp(24px,3.4vw,40px) var(--rand) clamp(44px,6vw,86px);
  background-image:radial-gradient(ellipse 96% 150% at 50% -26%,
    rgba(226,128,28,var(--schein)) 0%,
    rgba(226,128,28,calc(var(--schein) * .52)) 26%,
    rgba(226,128,28,calc(var(--schein) * .18)) 50%,
    rgba(226,128,28,calc(var(--schein) * .05)) 68%, transparent 86%)}
.wenian .titelblock .claim{color:var(--text);
  font-size:clamp(13px,.74rem + .5vw,20px);letter-spacing:.24em}
.wenian .titelblock .claim span{text-indent:.24em}
.wenian .titelblock .knopf{margin-top:clamp(22px,3vw,38px)}

/* ---------- Angebot ---------- */
.wenian .hell{background:var(--flaeche)}
.wenian .mitte{text-align:center}
/* Vier Kacheln: eine Spalte, dann zwei, dann vier — nie eine einzelne Restkachel. */
.wenian .karten{display:grid;gap:clamp(16px,2.2vw,26px);margin-top:clamp(26px,3vw,40px);
  grid-template-columns:1fr;grid-template-rows:auto auto;text-align:left}
@media (min-width:560px){.wenian .karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.wenian .karten{grid-template-columns:repeat(4,1fr)}}
/* Drei Kacheln: nie eine allein in der zweiten Reihe stehen lassen — darum
   springt das Gitter hier direkt von einer auf drei Spalten. Im Theme setzt
   der Baustein die Klasse selbst, nach der Zahl der sichtbaren Kacheln. */
@media (min-width:860px){.wenian .karten.k3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:859px){.wenian .karten.k3{grid-template-columns:1fr}}
/* Subgrid richtet Titel und Text aller Kacheln auf dieselbe Linie aus. */
.wenian .karte{position:relative;background-color:var(--kachel);
  background-image:linear-gradient(rgba(226,128,28,calc(var(--schein2) * .8)), transparent 46%);
  border:1px solid var(--linie);border-radius:4px;
  padding:clamp(22px,2.2vw,30px);overflow:hidden;transition:background .3s ease;
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0;align-content:start;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.wenian .karte::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(var(--bernstein-voll), color-mix(in srgb,var(--bernstein-voll) 25%,transparent))}
.wenian .karte:hover{transform:translateY(-3px);border-color:var(--bernstein);
  box-shadow:0 16px 34px -20px var(--schatten)}
.wenian .karte h3{color:var(--bernstein);margin-bottom:.55em}
.wenian .karte p{font-size:.98em;color:var(--weich)}

/* ---------- Text und Zierrat ---------- */
/* Pfotentrenner — steht am Anfang jedes Abschnitts und setzt ihn ab. */
.wenian .trenner{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,30px);
  width:min(560px,100% - 2*var(--rand));margin:0 auto clamp(30px,4vw,52px)}
.wenian .trenner::before, .wenian .trenner::after{content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--bernstein-voll))}
.wenian .trenner::after{background:linear-gradient(to left,transparent,var(--bernstein-voll))}
.wenian .trenner img{width:clamp(38px,4.8vw,56px);flex:none;opacity:.95;
  filter:drop-shadow(0 0 9px rgba(226,128,28,.6))}
.wenian .spruchband{position:relative;text-align:center;color:#f7ecd9;
  padding:clamp(58px,7.6vw,106px) var(--rand);
  background:#120c07 url('assets/img/fell_bernstein.jpg') center 62%/cover no-repeat;
  isolation:isolate}
.wenian .spruchband::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 120% at 50% 50%, rgba(226,128,28,.2), transparent 72%),
             linear-gradient(to bottom, rgba(18,12,7,.62), rgba(18,12,7,.4) 46%, rgba(18,12,7,.66))}
.wenian .spruchband p{font-family:var(--titel-f);font-weight:600;color:var(--glut);
  letter-spacing:.16em;text-indent:.16em;
  font-size:clamp(1.5rem,1.05rem + 1.9vw,2.95rem);line-height:1.22;
  text-shadow:0 2px 14px rgba(10,6,3,.8), 0 0 30px rgba(226,128,28,.45)}
.wenian .spruchband small{display:block;font-family:var(--lese);font-style:italic;letter-spacing:0;
  color:rgba(250,240,222,.94);margin-top:.85em;
  font-size:clamp(1.08rem,.98rem + .55vw,1.42rem);
  text-shadow:0 1px 10px rgba(10,6,3,.85)}

.wenian .textteil h2{position:relative}
.wenian .trennlinie{width:clamp(70px,10vw,120px);height:2px;border:0;border-radius:2px;
  background:linear-gradient(to right,var(--bernstein-voll),transparent);margin:2.2em 0}
.wenian .mitte .trennlinie{margin-inline:auto;
  background:linear-gradient(to right,transparent,var(--bernstein-voll),transparent)}

/* ---------- Referenzen (beim Start der Seite noch abgeschaltet) ---------- */
.wenian .stimmen{display:grid;gap:clamp(16px,2.2vw,26px);margin-top:clamp(26px,3vw,40px);
  grid-template-columns:1fr;text-align:left}
@media (min-width:720px){.wenian .stimmen{grid-template-columns:repeat(3,1fr)}}
.wenian .stimme{position:relative;background:var(--kachel);border:1px solid var(--linie);
  border-radius:4px;padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,30px)}
.wenian .stimme::before{content:'\201C';position:absolute;top:-.12em;left:.28em;
  font-family:var(--titel-f);font-size:clamp(3.4rem,2rem + 3vw,4.6rem);
  color:var(--bernstein-voll);opacity:.26;line-height:1}
.wenian .stimme p{position:relative;font-style:italic;color:var(--text)}
.wenian .stimme cite{display:block;margin-top:1em;font-family:var(--ui);font-style:normal;
  font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bernstein)}
.wenian .platzhalter{border-style:dashed}
.wenian .platzhalter p{color:var(--weich)}

/* ---------- Kontakt: warmer Abschluss auf Fell, wie die Kartenrueckseite ---------- */
.wenian .kontakt{position:relative;color:#f6ead6;isolation:isolate;
  background:#150e08 url('assets/img/fell_bernstein.jpg') center 24%/cover no-repeat}
.wenian .kontakt::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 110% at 50% 42%, rgba(226,128,28,.17), transparent 74%),
             linear-gradient(to bottom, rgba(18,12,7,.74), rgba(18,12,7,.66) 42%, rgba(18,12,7,.8))}
.wenian .kontakt h2, .wenian .kontakt p, .wenian .kontakt .kontakt-liste, .wenian .kontakt .vorspann{
  text-shadow:0 1px 10px rgba(12,8,4,.85), 0 0 26px rgba(12,8,4,.6)}
.wenian .kontakt h2{color:#fdf4e4}
.wenian .kontakt .vorspann{color:var(--glut)}
.wenian .kontakt p{color:rgba(246,234,214,.82)}
.wenian .kontakt .trenner::before, .wenian .kontakt .trenner::after{
  background:linear-gradient(to right,transparent,rgba(250,192,96,.3))}
.wenian .kontakt .trenner::after{background:linear-gradient(to left,transparent,rgba(250,192,96,.3))}
.wenian .kontakt .kontakt-liste .marke{color:var(--glut)}
.wenian .kontakt .kontakt-liste a{border-color:rgba(250,192,96,.55)}
.wenian .kontakt .kontakt-liste a:hover{color:var(--glut)}
.wenian .kontakt .trennlinie{background:linear-gradient(to right,var(--glut),transparent)}
.wenian .kontaktgitter{display:grid;gap:clamp(28px,4vw,62px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.wenian .kontakt-liste{list-style:none;display:grid;gap:.7em;font-size:1.06em}
.wenian .kontakt-liste li{display:flex;gap:.7em;align-items:baseline}
.wenian .kontakt-liste .marke{font-family:var(--ui);font-weight:600;font-size:.64em;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bernstein);
  flex:none;width:6.6em;padding-top:.2em}
.wenian .kontakt-liste a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--bernstein-voll);padding-bottom:1px}
.wenian .kontakt-liste a:hover{color:var(--bernstein)}
.wenian .kontakt-liste b{font-weight:700}

.wenian .sockel{background:var(--sockel);color:rgba(247,236,217,.6);font-family:var(--ui);
  font-size:.82rem;letter-spacing:.05em;padding:26px 0;text-align:center}
.wenian .sockel b{display:block;color:rgba(250,192,96,.9);font-family:var(--titel-f);
  font-weight:700;font-size:1.05rem;letter-spacing:.24em;text-indent:.24em;margin-bottom:5px}
.wenian .sockel span{display:block;letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;font-size:.7rem}

/* Auf schmalen Schirmen bleibt die Triade einzeilig und der Bandinhalt rueckt
   unter den Schalter; der Schlusssatz bricht ohne haengenden Trennpunkt. */
@media (max-width:560px){.wenian{--kopf-luft:66px}}
@media (max-width:480px){.wenian .band .zeile{font-size:11.2px;gap:.62em;letter-spacing:.22em}}
@media (max-width:620px){.wenian .titelblock .claim i{display:none}
  .wenian .titelblock .claim{gap:.2em .9em}}
@media (prefers-reduced-motion:reduce){.wenian, .wenian *{transition:none!important;scroll-behavior:auto}}