/*
Theme Name: und nu?
Theme URI: https://und-nu.de/
Description: Child Theme fuer Kadence, angepasst fuer und-nu.de. Eigene Anpassungen gehoeren hier hinein, damit Kadence-Updates sie nicht ueberschreiben.
Author: Malte Rowe
Author URI: https://mahero.de/
Template: kadence
Version: 2.1.0
Requires PHP: 7.4
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: und-nu
*/

/* ============================================================
   Gestaltung von und-nu.de

   Die Seitenvorlagen "und nu? Startseite" und "und nu? Unterseite"
   (template-startseite.php, template-unterseite.php) setzen die
   Body-Klasse "und-nu-seite". Alles hier drin gilt nur dort.

   Inhalte pflegt Katharina im Block-Editor. Die Bloecke bekommen
   ueber "Zusaetzliche CSS-Klassen" ihre Rolle:
     band hell|mittel|dunkel  zu-hell|zu-mittel|zu-dunkel   Abschnitt + Welle
     reihe [gedreht]          zwei Spalten, Bild links oder rechts
     bild / text              die beiden Spalten
     nummer / zwischen        kleine Zeilen mit Strich bzw. Versalien
     vielleicht               Liste mit Senf-Strichen
     klapp                    Gruppe von Ausklappern (Details-Bloecke)
     kontakt-formular         Huelle um das Fluent-Forms-Formular
   ============================================================ */

body.und-nu-seite{
  --tiefe:#12312F;
  --petrol:#2E6F6B;
  --nebel:#7FA89C;
  --sand:#F4E9D4;
  --sand-tief:#E4D3B4;
  --senf:#D9A441;
  --bordeaux:#8E2C3B;
  --tinte:#241D18;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --lese:"Newsreader",Georgia,"Times New Roman",serif;
  --rand:clamp(1.25rem,5vw,4rem);
  --spalte:min(1180px,100%);
  --linie:rgba(36,29,24,.22);

  margin:0;
  background:var(--sand);
  color:var(--tinte);
  font-family:var(--lese);
  font-size:clamp(1.05rem,.55rem + .9vw,1.2rem);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body.und-nu-seite *,body.und-nu-seite *::before,body.und-nu-seite *::after{box-sizing:border-box}
body.und-nu-seite::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body.und-nu-seite h1,body.und-nu-seite h2,body.und-nu-seite h3{
  font-family:var(--display);font-weight:700;line-height:1.02;text-wrap:balance;letter-spacing:-.02em;margin:0;color:inherit;
}
body.und-nu-seite p{margin:0}
body.und-nu-seite a{color:inherit}
body.und-nu-seite :focus-visible{outline:3px solid var(--senf);outline-offset:3px;border-radius:2px}

/* Kadence-Huelle neutralisieren */
body.und-nu-seite #wrapper,body.und-nu-seite #inner-wrap{padding:0;margin:0;max-width:none;background:transparent}

/* ---------- Kopfzeile (Marke + Menue) ---------- */
body.und-nu-seite .kopf{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:baseline;justify-content:flex-end;
  width:var(--spalte);margin:0 auto;padding:clamp(1.5rem,3vw,2.25rem) 0 0;
}
body.und-nu-seite .menue{display:flex;gap:clamp(1rem,2.5vw,2rem);font-family:var(--display);font-weight:500;font-size:.9rem}
body.und-nu-seite .menue a{text-decoration:none;opacity:.82;padding-bottom:2px;border-bottom:1.5px solid transparent}
body.und-nu-seite .menue a:hover{opacity:1;border-bottom-color:var(--senf)}

/* ---------- Buehne ---------- */
body.und-nu-seite .buehne{position:relative;background:var(--tiefe);color:var(--sand);overflow:hidden;padding:0 var(--rand)}
body.und-nu-seite .buehne-innen{width:var(--spalte);margin:0 auto;position:relative;z-index:3;
  padding:clamp(4rem,11vw,9rem) 0 clamp(3rem,7vw,5rem)}
body.und-nu-seite .buehne-innen>*{max-width:min(100%,52ch)}
body.und-nu-seite .buehne.klein .buehne-innen{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
body.und-nu-seite .laby{
  position:absolute;z-index:1;right:max(4vw,calc((100vw - var(--spalte))/2));
  top:clamp(3.5rem,10vw,7rem);width:clamp(200px,30vw,400px);height:auto;
}
body.und-nu-seite .laby path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.und-nu-seite .strahl{position:absolute;z-index:0;inset:0;overflow:hidden}
body.und-nu-seite .strahl span{
  position:absolute;top:-40%;left:-10%;width:130%;height:26px;background:var(--petrol);opacity:.5;
  transform:rotate(28deg);transform-origin:left center;
}
body.und-nu-seite .strahl span:nth-child(2){top:-25%;height:12px;opacity:.35}
body.und-nu-seite .strahl span:nth-child(3){top:-8%;height:40px;opacity:.22}
body.und-nu-seite .oberzeile{
  font-family:var(--display);font-weight:500;font-size:.85rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nebel);margin:1.6rem 0 0;
}
body.und-nu-seite .trenner{color:var(--senf);margin:0 .35em;font-weight:400}
body.und-nu-seite .buehne h1{font-size:clamp(4.2rem,14vw,9.5rem);font-weight:800;letter-spacing:-.05em;max-width:7ch}
body.und-nu-seite .buehne h1 .frage{color:var(--senf)}
body.und-nu-seite .vorspann{font-size:clamp(1.15rem,.8rem + 1vw,1.5rem);max-width:26ch;margin-top:1.2rem;color:#EADCC2}
body.und-nu-seite .welle{display:block;position:relative;z-index:2;width:calc(100% + 2*var(--rand));margin-left:calc(-1*var(--rand));height:clamp(48px,7vw,110px);margin-top:clamp(3.5rem,8vw,6.5rem);margin-bottom:-1px}
body.und-nu-seite .buehne.klein .welle{margin-top:0}

/* ---------- Baender (Group-Bloecke mit Klasse "band") ---------- */
body.und-nu-seite .band{position:relative;padding:clamp(4rem,9vw,7.5rem) var(--rand) 0;margin:0}
body.und-nu-seite .band.hell{background:var(--sand);color:var(--tinte);--linie:rgba(36,29,24,.22)}
body.und-nu-seite .band.dunkel{background:var(--tiefe);color:var(--sand);--linie:rgba(244,233,212,.28)}
body.und-nu-seite .band.mittel{background:var(--petrol);color:var(--sand);--linie:rgba(244,233,212,.28)}
body.und-nu-seite .band:last-child{padding-bottom:clamp(4rem,9vw,7.5rem)}
/* Welle als Maske: Farbe = naechstes Band */
body.und-nu-seite .band::after{
  content:"";display:none;width:calc(100% + 2*var(--rand));margin-left:calc(-1*var(--rand));
  height:clamp(48px,7vw,110px);margin-top:clamp(3.5rem,8vw,6.5rem);margin-bottom:-1px;position:relative;z-index:2;
  -webkit-mask:var(--welle) center/100% 100% no-repeat;mask:var(--welle) center/100% 100% no-repeat;
  background:var(--naechste);
}
body.und-nu-seite .band.zu-mittel::after{display:block;--naechste:var(--petrol);--welle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,72 C200,104 330,30 500,42 C670,54 820,102 1010,80 C1180,60 1300,20 1440,44 L1440,110 L0,110 Z'/%3E%3C/svg%3E")}
body.und-nu-seite .band.zu-hell::after{display:block;--naechste:var(--sand);--welle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C160,88 320,96 480,66 C640,36 800,8 980,34 C1140,58 1290,92 1440,70 L1440,110 L0,110 Z'/%3E%3C/svg%3E")}
body.und-nu-seite .band.zu-dunkel::after{display:block;--naechste:var(--tiefe);--welle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,66 C180,26 340,94 520,80 C700,66 840,14 1020,38 C1190,60 1310,98 1440,56 L1440,110 L0,110 Z'/%3E%3C/svg%3E")}

/* ---------- Reihen (Columns-Block mit Klasse "reihe") ---------- */
body.und-nu-seite .wp-block-columns.reihe{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;
  width:var(--spalte);margin:0 auto;
}
body.und-nu-seite .reihe.gedreht .bild{order:2}
body.und-nu-seite .wp-block-column.bild{position:sticky;top:clamp(1.5rem,4vw,3rem);align-self:start;flex:none;width:auto;margin:0;min-width:0}
/* Sticky braucht Vorfahren ohne overflow:hidden. Kadence setzt es auf #wrapper. */
body.und-nu-seite #wrapper{overflow:visible}
body.und-nu-seite .wp-block-column.text{display:flex;flex-direction:column;gap:1.35rem;max-width:50ch;flex:none;width:auto;margin:0;min-width:0;align-self:start}
body.und-nu-seite .text>*{margin:0}
body.und-nu-seite .bild .wp-block-image{margin:0}
body.und-nu-seite .bild img{display:block;width:100%;max-width:100%;height:auto;border-radius:2px}
body.und-nu-seite .nummer{
  font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:.7rem;
}
body.und-nu-seite .nummer::before{content:"";width:34px;height:2px;background:var(--senf);display:block}
body.und-nu-seite .band h2{font-size:clamp(2.1rem,1.2rem + 2.4vw,3.4rem)}
body.und-nu-seite .zwischen{font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-top:.6rem}
body.und-nu-seite ul.vielleicht{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem}
body.und-nu-seite ul.vielleicht li{padding-left:1.2rem;position:relative;margin:0}
body.und-nu-seite ul.vielleicht li::before{content:"";position:absolute;left:0;top:.72em;width:.5rem;height:2px;background:var(--senf)}

/* ---------- Ausklapper (Details-Bloecke in einer Gruppe "klapp") ---------- */
body.und-nu-seite .klapp{display:flex;flex-direction:column;margin:0}
body.und-nu-seite .klapp details{border-top:1px solid var(--linie);margin:0;padding:0}
body.und-nu-seite .klapp details:last-child{border-bottom:1px solid var(--linie)}
body.und-nu-seite .klapp summary{
  list-style:none;cursor:pointer;padding:.9rem 2.2rem .9rem 0;position:relative;
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;margin:0;
}
body.und-nu-seite .klapp summary::-webkit-details-marker{display:none}
body.und-nu-seite .klapp summary::after{
  content:"+";position:absolute;right:.1rem;top:.7rem;font-family:var(--display);font-weight:500;
  font-size:1.5rem;line-height:1;color:var(--senf);transition:transform .25s ease;
}
body.und-nu-seite .klapp details[open] summary::after{transform:rotate(45deg)}
body.und-nu-seite .klapp summary{font-size:.98rem;opacity:.85}
body.und-nu-seite .klapp summary strong{font-family:var(--display);font-weight:700;font-size:1.05rem;opacity:1;flex-basis:100%}
body.und-nu-seite .laut{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2em;letter-spacing:-.01em}
body.und-nu-seite .leise{font-size:.78em}
body.und-nu-seite .klapp details>:not(summary){margin:0 2.2rem .6rem 0;max-width:46ch}
body.und-nu-seite .klapp details>:not(summary):last-child{margin-bottom:1.15rem}

/* ---------- Kontakt ---------- */
body.und-nu-seite .vertraulich{font-size:1rem;opacity:.9;display:flex;gap:.6rem;align-items:baseline}
body.und-nu-seite .vertraulich::before{content:"";flex:none;width:.5rem;height:2px;background:var(--senf);transform:translateY(-.3em)}
body.und-nu-seite .datenschutz{font-size:.88rem;color:var(--nebel);max-width:34rem;line-height:1.5}
body.und-nu-seite .datenschutz a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(244,233,212,.45)}
body.und-nu-seite .datenschutz a:hover{color:var(--senf);border-bottom-color:var(--senf)}

/* Fluent Forms in unserem Kleid */
body.und-nu-seite .kontakt-formular .fluentform{max-width:34rem}
body.und-nu-seite .kontakt-formular .ff-el-group{margin-bottom:1.1rem}
body.und-nu-seite .kontakt-formular .ff-el-input--label label{
  font-family:var(--display);font-weight:500;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nebel);margin-bottom:.4rem;display:block;
}
body.und-nu-seite .kontakt-formular .ff-el-input--label.asterisk-right label:after{color:var(--senf)}
body.und-nu-seite .kontakt-formular .ff-el-form-control{
  font-family:var(--lese);font-size:1.02rem;color:var(--sand);background:rgba(244,233,212,.07);
  border:1.5px solid rgba(244,233,212,.3);padding:.75rem .9rem;border-radius:2px;width:100%;box-shadow:none;line-height:1.4;height:auto;
}
body.und-nu-seite .kontakt-formular .ff-el-form-control:focus{border-color:var(--senf);outline:none;box-shadow:none}
body.und-nu-seite .kontakt-formular textarea.ff-el-form-control{min-height:7.5rem;resize:vertical}
body.und-nu-seite .kontakt-formular .ff-el-form-control::placeholder{color:rgba(244,233,212,.45)}
body.und-nu-seite .kontakt-formular .ff-btn-submit{
  font-family:var(--display)!important;font-weight:700!important;font-size:1rem!important;
  background:var(--senf)!important;color:#2A1D05!important;border:none!important;border-radius:0!important;
  padding:.85rem 1.6rem!important;cursor:pointer;transition:transform .18s ease;box-shadow:none!important;min-height:0!important;
}
body.und-nu-seite .kontakt-formular .ff-btn-submit:hover{transform:translateY(-2px)}
body.und-nu-seite .kontakt-formular .ff-el-is-error .ff-el-form-control{border-color:var(--senf)}
body.und-nu-seite .kontakt-formular .text-danger,body.und-nu-seite .kontakt-formular .error{color:var(--senf);font-size:.9rem}
body.und-nu-seite .kontakt-formular .ff-message-success{
  background:rgba(244,233,212,.08);border:1.5px solid var(--senf);color:var(--sand);padding:1rem 1.2rem;border-radius:2px;font-family:var(--lese);
}
body.und-nu-seite .kontakt-formular .ff-errors-in-stack{color:var(--senf)}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
body.und-nu-seite .unterseite .innen{width:min(70ch,100%);margin:0 auto}
body.und-nu-seite .unterseite h1{font-size:clamp(2.4rem,1.5rem + 3vw,4rem);margin-bottom:2rem}
body.und-nu-seite .unterseite h2{font-size:clamp(1.35rem,1rem + 1vw,1.7rem);margin:2.2rem 0 .6rem}
body.und-nu-seite .unterseite h3{font-size:1.15rem;margin:1.6rem 0 .4rem}
body.und-nu-seite .unterseite p{margin:0 0 .9rem}
body.und-nu-seite .unterseite ul{margin:0 0 .9rem 1.2rem;padding:0}
body.und-nu-seite .unterseite .hervorgehoben{background:var(--sand-tief);border-left:4px solid var(--senf);padding:1.4rem 1.6rem .6rem;margin:2.5rem 0}
body.und-nu-seite .unterseite .hervorgehoben h2{margin-top:0}
body.und-nu-seite .unterseite a{text-decoration:none;border-bottom:1px solid var(--senf)}
body.und-nu-seite .unterseite a:hover{color:var(--petrol)}

/* ---------- Fuss ---------- */
body.und-nu-seite .fuss{background:var(--tiefe);color:var(--nebel);padding:clamp(2.5rem,5vw,4rem) var(--rand) 3rem}
body.und-nu-seite .fuss-innen{width:var(--spalte);margin:0 auto;display:flex;flex-direction:column;gap:1.75rem}
body.und-nu-seite .fuss-kopf{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-family:var(--display);font-size:.9rem;color:var(--sand)}
body.und-nu-seite .fuss-kopf span:last-child{color:var(--nebel)}
body.und-nu-seite .fuss-links{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;
  border-top:1px solid rgba(127,168,156,.3);padding-top:1.25rem;
  font-family:var(--display);font-size:.82rem}
body.und-nu-seite .fuss-links a{color:var(--nebel);text-decoration:none;border-bottom:1px solid rgba(127,168,156,.45)}
body.und-nu-seite .fuss-links a:hover{color:var(--senf);border-bottom-color:var(--senf)}

/* ---------- Auftritt ---------- */
body.und-nu-seite .auf{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
body.und-nu-seite .auf.da{opacity:1;transform:none}
body.und-nu-seite .laby{transform:translateY(30px) scale(.97);opacity:0;transition:transform 1.5s cubic-bezier(.16,.7,.3,1),opacity 1.2s ease}
body.und-nu-seite .laby.da{transform:none;opacity:1}
body.und-nu-seite .laby .kern{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s ease .5s}
body.und-nu-seite .laby.da .kern{stroke-dashoffset:0}

@media (max-width:640px){
  body.und-nu-seite .menue a:not(:last-child){display:none}
  body.und-nu-seite .kopf{align-items:center}
}
@media (max-width:820px){
  body.und-nu-seite .wp-block-columns.reihe{grid-template-columns:minmax(0,1fr)}
  body.und-nu-seite .reihe.gedreht .bild{order:0}
  body.und-nu-seite .wp-block-column.bild{position:relative;top:auto}
  body.und-nu-seite .buehne-innen{padding-top:clamp(2rem,10vw,4rem);padding-bottom:1.5rem}
  body.und-nu-seite .buehne-innen>*{max-width:100%}
  body.und-nu-seite .laby{position:relative;right:auto;top:auto;margin:.5rem 0 -1rem auto;width:min(52vw,215px)}
  body.und-nu-seite .welle,body.und-nu-seite .band::after{margin-top:clamp(2.25rem,7vw,3.5rem)}
}
@media (prefers-reduced-motion:reduce){
  body.und-nu-seite .auf,body.und-nu-seite .laby{transition:none;opacity:1;transform:none}
  body.und-nu-seite .laby .kern{stroke-dashoffset:0;transition:none}
}