/* ==========================================================================
   custom.css – Modernes Redesign "Achtsam-sein"
   Wird NACH weban.css geladen. Modernisiert Layout, Abstände, Hover-Effekte
   und Typografie-Hierarchie per Flexbox/Custom Properties – Farben und
   Schriftart bleiben bewusst 1:1 die Originalwerte aus weban.css.
   Funktioniert sowohl mit dem alten Markup (csc-textpic, TYPO3 <= v8)
   als auch mit dem neuen Fluid-Markup (ce-textpic, TYPO3 v12/13).
   ========================================================================== */

/* -------------------- 1. Design-Tokens -------------------- */
:root {
  /* Farben – 1:1 aus weban.css übernommen, keine neue Palette */
  --as-ink:         #000;      /* body, weban.css */
  --as-heading:     #222;      /* h1-h3, weban.css */
  --as-bg:          #fff;      /* .maincontent, weban.css */
  --as-bg-soft:     #f6f6f6;   /* .panel-default:hover, weban.css */
  --as-accent:      #c41d41;   /* p a / Akzentrot, weban.css */
  --as-accent-dark: #222;      /* csc-form-5 input:hover, weban.css (echter Originalwert) */
  --as-sand:        #FFD47F;   /* .navbar, weban.css */
  --as-taupe:       #84766D;   /* footer / dropdown, weban.css */
  --as-border:      #e2e2e2;   /* neu: dezente Trennlinie statt hartem #000-Rand */

  /* Schrift – Original-Stack, keine neuen Webfonts */
  --as-font: verdana, helvetica, arial, sans-serif;

  /* Abstandsraster (ersetzt die alten Prozent-Hacks durch feste, konsistente Werte) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;

  --radius: 6px;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.14);
  --transition: 0.25s ease;
}

/* -------------------- 2. Basis & Typografie -------------------- */
body {
  font-family: var(--as-font);
  color: var(--as-ink);
  background-color: var(--as-bg);
  line-height: 1.65;
}

/* Abstand zwischen Menüleiste und Seiteninhalt (vorher: Überschrift klebte direkt am Menü) */
.maincontent {
  padding-top: var(--sp-4);
}

h1, h2, h3,
.csc-textpic-text h1, .csc-textpic-text h2,
.ce-bodytext h1, .ce-bodytext h2, .ce-bodytext h3,
header h1, header h2, header h3 {
  font-family: var(--as-font) !important;
  font-weight: bold !important; /* erzwingt einheitliches Gewicht, auch gegen abweichende Editor-Formatierung */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--as-heading);
  line-height: 1.3;
  text-align: left;
}
h1 { font-size: 1.85rem; margin: 0 0 var(--sp-3); }
h2 { font-size: 1.35rem;  margin: 0 0 var(--sp-2); }
h3 { font-size: 1.1rem;   margin: 0 0 var(--sp-2); }

h4, h5, h6 {
  font-family: var(--as-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--as-heading);
}

p { line-height: 1.7; }

p a,
.csc-textpic-text ul li a,
.ce-bodytext a {
  color: var(--as-accent) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
p a:hover,
.csc-textpic-text ul li a:hover,
.ce-bodytext a:hover {
  border-bottom-color: var(--as-accent);
}

/* -------------------- 3. Navigation -------------------- */
.navbar {
  background-color: var(--as-sand) !important;
  border-style: none;
  box-shadow: var(--shadow);
}
.navbar-nav {
  display: flex;
  flex-wrap: wrap;
}
.navbar-nav > li {
  border-right: none; /* alte harte #000-Trennlinie entfernt */
}
.navbar-nav > li > a,
.navbar a:link, .navbar a:active, .navbar a:visited {
  color: var(--as-ink) !important;
  font-family: var(--as-font);
  letter-spacing: 0.05em;
  padding: var(--sp-2) var(--sp-3) !important;
  transition: background-color var(--transition);
}
.navbar-nav > li > a:hover {
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: none !important;
}
.navbar-nav .active a,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: var(--as-taupe) !important; /* weicher als reines Schwarz, trotzdem Original-Farbe */
  color: #fff !important;
  text-decoration: none !important;
}

/* -------------------- 4. Buttons -------------------- */
.btn-default,
.csc-form-5 input[type=submit] {
  background-color: var(--as-accent) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 0.85rem 2rem;
  transition: background-color var(--transition), transform var(--transition);
}
.btn-default:hover,
.csc-form-5 input[type=submit]:hover {
  background-color: var(--as-accent-dark) !important;
  transform: translateY(-1px);
}

/* -------------------- 5. Bild-Text-Element: "Editorial Split" -------------------- */
/* 1-Spalter, Bild links / Text rechts */
.col-sm-12 .csc-textpic-intext-left-nowrap,
.ce-textpic.ce-left.ce-intext {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-4); /* weißer Zwischenraum zwischen Bild und Text */
  min-height: 460px;
  margin-bottom: var(--sp-5);
}
/* 1-Spalter, Bild rechts / Text links – gespiegelte Variante */
.col-sm-12 .csc-textpic-intext-right-nowrap,
.ce-textpic.ce-right.ce-intext {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: var(--sp-4);
  min-height: 460px;
  margin-bottom: var(--sp-5);
}

/* Bildbox: eigene abgerundete Karte mit Schatten, füllt die volle Höhe der Zeile */
.col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-imagewrap,
.col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap,
.ce-textpic.ce-left.ce-intext .ce-gallery,
.ce-textpic.ce-right.ce-intext .ce-gallery {
  position: relative;
  width: 45%;
  margin: 0;
  flex: 0 0 45%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* Höhen-Kette bis zum <img> durchreichen (Fluid verschachtelt .ce-outer/.ce-inner/
   .ce-row/.ce-column/figure ohne eigene Höhe – ohne diese Regel bleibt das Bild in
   seiner natürlichen Höhe und es entsteht eine Lücke statt bündig mit dem Textblock). */
.ce-textpic.ce-left.ce-intext .ce-gallery,
.ce-textpic.ce-left.ce-intext .ce-gallery *,
.ce-textpic.ce-right.ce-intext .ce-gallery,
.ce-textpic.ce-right.ce-intext .ce-gallery * {
  height: 100% !important;
  margin: 0;
}
.ce-textpic.ce-left.ce-intext .ce-row,
.ce-textpic.ce-right.ce-intext .ce-row {
  display: flex !important; /* damit .ce-column sich ebenfalls über die volle Höhe streckt */
}
.ce-textpic.ce-left.ce-intext .ce-row .image-embed-item,
.ce-textpic.ce-right.ce-intext .ce-row .image-embed-item {
  flex: 1;
}
.col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-imagewrap img,
.col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap img,
.ce-textpic.ce-left.ce-intext .image-embed-item,
.ce-textpic.ce-right.ce-intext .image-embed-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Textbox: eigene abgerundete Karte, optisch getrennt vom Bild statt schwebender Überlagerung */
.col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-text,
.col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-text,
.ce-textpic.ce-left.ce-intext .ce-bodytext,
.ce-textpic.ce-right.ce-intext .ce-bodytext {
  width: 55%;
  flex: 1;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--as-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Kleines "Eyebrow"-Label über der Überschrift, in Original-Akzentfarbe */
.col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-text h1::before,
.col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-text h1::before,
.ce-textpic.ce-left.ce-intext .ce-bodytext h1::before,
.ce-textpic.ce-left.ce-intext .ce-bodytext h2::before,
.ce-textpic.ce-right.ce-intext .ce-bodytext h1::before,
.ce-textpic.ce-right.ce-intext .ce-bodytext h2::before {
  content: "achtsam-sein";
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--as-accent);
  margin-bottom: var(--sp-1);
}

/* -------------------- 5b. Vita-Seite: Text links, Foto rechts (2:1-Verhältnis) -------------------- */
/* Das Element auf /vita ist im Backend als "Bild oben, Text unten" (ce-center ce-above)
   angelegt, nicht als ce-left/ce-right. Gezielt über die Element-ID #c4 umgebaut,
   damit nur diese Seite betroffen ist. */
#c4 .ce-textpic.ce-center.ce-above {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse; /* Bild steht im Markup zuerst -> wandert nach rechts */
  align-items: center;
  gap: var(--sp-4);
}
#c4 .ce-gallery {
  width: 33.333%;
  flex: 0 0 33.333%;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
#c4 .ce-gallery img {
  width: 100%;
  height: auto;
  display: block;
}
#c4 .ce-bodytext {
  width: 66.666%;
  flex: 1;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #c4 .ce-textpic.ce-center.ce-above {
    flex-direction: column;
  }
  #c4 .ce-gallery,
  #c4 .ce-bodytext {
    width: 100%;
    flex: none;
  }
}

/* -------------------- 6. Teaser-Karten (3-Spalter, z. B. "Projekte") -------------------- */
.col-sm-4 .csc-textpic {
  background-color: var(--as-bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.col-sm-4 .csc-textpic:hover {
  background-color: var(--as-bg-soft);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.col-sm-4:hover img {
  opacity: 1; /* alte Ausgrauung beim Hover entfernt */
}
.col-sm-4 h2 {
  padding: var(--sp-3) var(--sp-3) 0;
  margin: 0 0 var(--sp-1);
  font-size: 1rem;
}
.col-sm-4 p {
  padding: 0 var(--sp-3) var(--sp-3);
}
.col-sm-4 .csc-textpic .btn-default {
  display: inline-block;
  width: auto;
  margin: 0 var(--sp-3) var(--sp-3);
  background-color: var(--as-accent);
  color: #fff;
}
.col-sm-4 .csc-textpic:hover .btn-default {
  background-color: var(--as-accent-dark);
  color: #fff;
}

/* -------------------- 7. Formulare -------------------- */
.csc-form-element input[type=text],
.csc-form-element textarea,
textarea {
  border: 1px solid var(--as-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  font-family: var(--as-font);
  color: var(--as-ink);
  background-color: var(--as-bg);
  transition: border-color var(--transition);
}
.csc-form-element input[type=text]:focus,
textarea:focus {
  border-color: var(--as-accent);
  outline: none;
}
.csc-form-element label {
  font-weight: bold;
  margin-bottom: var(--sp-1);
}

/* -------------------- 8. Akkordeon (FAQ-Panels) -------------------- */
.panel-group .panel {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-2);
}
.panel-default > .panel-heading {
  background-color: var(--as-taupe);
  border-radius: 0;
  padding: var(--sp-2) var(--sp-3);
  transition: background-color var(--transition);
}
.panel-heading a:link,
.panel-heading a:active,
.panel-heading a:visited {
  color: #fff;
  font-family: var(--as-font);
  text-decoration: none;
}

/* -------------------- 9. Footer -------------------- */
footer, .footer {
  background-color: var(--as-taupe) !important;
  color: #fff;
  padding: var(--sp-4) 0;
}
.footer a:link, .footer a:active, .footer a:visited,
footer a:link, footer a:active, footer a:visited {
  color: #fff;
  transition: opacity var(--transition);
}
.footer a:hover, footer a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* -------------------- 10. Breiteres Layout -------------------- */
/* Bootstrap hält .container auf festen, engen Stufen (max. 1170px) fest,
   dadurch wirkt die Seite auf großen Bildschirmen wie eine schmale Spalte
   in der Bildschirmmitte. Hier wird die nutzbare Breite vergrößert. */
.container {
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    max-width: 1520px;
  }
}

/* -------------------- 11. Responsive -------------------- */
@media screen and (max-width: 768px) {
  .col-sm-12 .csc-textpic-intext-left-nowrap,
  .col-sm-12 .csc-textpic-intext-right-nowrap,
  .ce-textpic.ce-left.ce-intext,
  .ce-textpic.ce-right.ce-intext {
    flex-direction: column;
    min-height: 0;
  }
  .col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-imagewrap,
  .col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap,
  .ce-textpic.ce-left.ce-intext .ce-gallery,
  .ce-textpic.ce-right.ce-intext .ce-gallery,
  .col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-text,
  .col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-text,
  .ce-textpic.ce-left.ce-intext .ce-bodytext,
  .ce-textpic.ce-right.ce-intext .ce-bodytext {
    width: 100%;
    flex: none;
  }
  .col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-imagewrap img,
  .col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap img,
  .ce-textpic.ce-left.ce-intext .image-embed-item,
  .ce-textpic.ce-right.ce-intext .image-embed-item {
    min-height: 260px;
  }
  .col-sm-12 .csc-textpic-intext-left-nowrap .csc-textpic-text,
  .col-sm-12 .csc-textpic-intext-right-nowrap .csc-textpic-text,
  .ce-textpic.ce-left.ce-intext .ce-bodytext,
  .ce-textpic.ce-right.ce-intext .ce-bodytext {
    padding: var(--sp-3) var(--sp-3);
  }
}