/* === Allgemeiner Reset === */
/* WICHTIG! Mobile First Ansatz beachten */
*, *:before, *:after { 
    box-sizing: border-box; 
    margin: 0; padding: 0; 
}
html, body { 
    scroll-behavior: smooth; 
}
/* === Variablen === */
/* Farben mit HSL-Schema --> gute BAsis für abgeleitetet Berechnungen */
:root{
  --clr-primary-h: 174;
  --clr-primary-s: 80%;
  --clr-primary-l: 35%;

  --clr-primary: hsl(var(--clr-primary-h) var(--clr-primary-s) var(--clr-primary-l));
  --clr-accent:  hsl(var(--clr-primary-h) calc(var(--clr-primary-s) - 25%) calc(var(--clr-primary-l) + 25%));

  --clr-bg:#fff; 
  --clr-text:#222; 
  --clr-muted:#6b7280;

/* Typographie */
  --ff-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-heading: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;

  --fs-base: 16px; 
  --lh-base:1.7;
    
    --radius: .5rem;
    --shadow: 0 4px 10px rgba(0,0,0,.12);
    
    --container-w: min(90rem, 92%);
    
/* Höhe Parallax-Bilder: .hero 1. Bild; .parallax Folgeabschnitte */
  --parallax-min: 20vh; 
  --hero-min: 35vh;  

  /* Header und LOGO */    
  --sitename-lh: 1.4;        /* line-height der Überschrift */
  --sitename-lines-max: 2;   /* Logo darf bis 2 Textzeilen hoch werden */
    
  /* Breite Grid Area + grid_box / grid_box_plain */
  --grid-content-wide: 1400px;    
  --grid-box-wide: 280px;   
}

/* === Kategorie-Overrides auf Root-Ebene (robust) === */
/* für jede Kategorie wird eigenes Farbschema berechnet (Nav, h2, H3)
Home (optional, entspricht Default) */
:root:has(body[data-category="Home"]) {
  --clr-primary-h: 174;
  --clr-primary-s: 80%;
  --clr-primary-l: 35%;
}

/* Angebote (Violett, gedeckt) */
:root:has(body[data-category="Angebote"]) {
  --clr-primary-h: 268;
  --clr-primary-s: 55%;
  --clr-primary-l: 42%;
}

/* Referenzen (Blau) */
:root:has(body[data-category="Referenzen"]) {
  --clr-primary-h: 220;
  --clr-primary-s: 65%;
  --clr-primary-l: 40%;
}

/* Service (Orange) */
:root:has(body[data-category="Service"]) {
  --clr-primary-h: 25;
  --clr-primary-s: 70%;
  --clr-primary-l: 45%;
}

/* === Body + HTML (Basis) === */
body{
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
}
/* === Wichtige Styles === */
a, a.link, a.mail, a.page, a.category, a.file {
  color: var(--clr-primary);
  text-decoration: none;    
  transition: color .2s ease, background-color .2s ease, opacity .2s ease;     
}
a:hover,
a.link:hover, a.mail:hover, a.page:hover, a.category:hover, a.file:hover {
  color: var(--clr-accent);
  text-decoration: underline;
}
p { 
    line-height: 1.61em; 
    font-weight: 300; 
    font-size: 1em; 
    color: var(--clr-text); 
    margin-bottom: 1.2em; 
    text-wrap: pretty;  /* moderne, schönere Umbrüche */
  hyphens: auto;
}
iframe { border: 0 }

article, aside, figure, footer, header, hgroup, section { display: block;}

span { 
    font-style: inherit; 
    font-weight: inherit; 
}

fieldset { border: none }

.noborder { border: none }

/* === Überschriften === */
h1, h2, h3 { 
    font-family: var(--ff-heading);
    font-weight: 600;             /* kräftiger, aber nicht fett */
    line-height: 1.3;
    margin: 1.2em 0 .6em;         /* oberer Abstand > unterer Abstand */
}
h1 { 
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    line-height: 1.15; 
    margin-bottom: 1.25em; 
}
h2 { 
    font-size: clamp(1.5rem, 2.5vw + .75rem, 2.25rem);
    margin-bottom: 1em; 
    color: var(--clr-primary); 
} 
h3 { 
    font-size: clamp(1.2rem, 2vw + .5rem, 1.5rem); 
    margin-bottom: .75em; 
    line-height: 1.4em;
    color: #333;
}
/* === Header mit Inhalt (Logo (opt.) und Seitenname === */
.header{
    padding: .5rem 0;
}
/* Branding: strecken, damit das Logo die Höhe des Sitename annehmen kann */
/* Logo */
.site-logo {
    /* Standardeinstellungen für das Logo, wenn es ausgeblendet ist */
    display: none;
    object-fit: contain;
    height: auto; /* Basiswert, falls display:block wird */
    width: auto;  /* Basiswert */
    max-height: 70px; /* Optionaler oberer Grenzwert für die Höhe, auch wenn ausgeblendet */
    flex-shrink: 0; /* Logo behält seine Größe im Flex-Container */
}

/* Logo einschalten via body[data-logo="on"] und detaillierte Größeneinstellung */
body[data-logo="on"] .site-logo {
    display: block;
    height: 100%; /* Passt sich an die Sitename-Höhe an, wenn im .branding-Flex-Container */
    max-height: clamp(56px, 14vw, 140px); /* Responsiver Deckel für die Höhe */
    /* width: auto; bleibt vom oberen .site-logo bestehen */
}

.logo-link {
    display: inline-flex;
    align-items: center;
}
.logo-link:hover {
    opacity: 0.75;
}
/* Branding-Container, der das Logo und den Sitename enthält */
.branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 80px;
    text-align: center;
}
/* Abschnitt 1 - Hero-Bereich */
.hero .wrapper {
    text-align: center;
    display: grid;
    place-items: center;
}
/* #sitename (mobile-first, mit Logo-Ausrichtung kompatibel) */
#sitename {
  flex: 1;                 /* nimmt den übrigen Platz */
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw + 0.5rem, 3.5rem);
  line-height: var(--sitename-lh);
  letter-spacing: .2px;
  text-wrap: balance;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 22ch;
  margin: 0;
  text-align: center;      /* wirklich zentriert innerhalb seines Flexbereichs */
}

/* === Layout Utilities === */
.wrapper{ 
    width: var(--container-w); 
    margin-inline: auto; 
}
.section{ padding: var(--section-pad) 0; }
.tagline{ color: var(--clr-muted); }

/* === Parallax Bilder / Hero und 3 ABschnitte === */
.parallax{
  min-height: var(--parallax-min);  
  position: relative;
  color: #fff;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  isolation: isolate;
}
.parallax::before{
  content:"";
  position: absolute; 
  inset: 0;
  background: rgba(0,0,0,.45); /* Abdunkeln */
  backdrop-filter: blur(1.5px); /* leichte Unschärfe */
  z-index: -1;
}
@media (max-width: 48rem){
  .parallax{ background-attachment: scroll; }
}
.hero{
  min-height: var(--hero-min);
  display: grid;
  place-items: center;
  text-align: center;
}
.hero .heading1 { 
    text-transform: uppercase; 
    letter-spacing: .05em; 
}
/* === Navigation (sticky), einfach, ohne Untermenüs === */
.nav.sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--clr-primary);
  box-shadow: var(--shadow);
}
/* Hauptmenü */
.mainmenu {
  margin: 0;
  padding: .4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
}
.mainmenu-item { list-style: none; }

/* Links */
.mainmenu-item a, a.menu, a.menuactive {
  font-size: .95rem; /* Basisgröße für Smartphones */
  padding: .5rem .9rem;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: background .2s ease; /* Übergang für Hover/Active */
}

/* Hover-Zustand */
.mainmenu-item a:hover,
a.menu:hover {
  background: rgba(255,255,255,.12);
}

/* Aktiver Zustand (besuchte Seite) */
a.menuactive {
  background: rgba(255,255,255,.22);
  font-weight: 600;
}
a:focus-visible{
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
/* === mozilo Syntax; diese Elemente erzeugt Editor === */
small{ font-size: .875rem; color: var(--clr-muted); }

hr, .horizontalrule{
  border: none; border-top: .111em #444 solid; max-width: 100%; margin: .75rem 0;
}
/* Zitate */
blockquote{
  margin: 1.2em 0;
  padding: .75em 1em;
  border-left: 4px solid var(--clr-primary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  color: #555;
  font-style: italic;
}
.alignleft{ text-align: left }
.aligncenter{ text-align: center }
.alignright{ text-align: right }
.alignjustify{ text-align: justify }

.highlight{ padding: .1em .2em; background: #ff3b3b; color: #fff; border-radius: .25em }

.unorderedlist, .orderedlist{ margin: 1em 0 1em 1.5em; }
.unorderedlist .listitem,
.orderedlist .listitem{ margin: .25em 0 }

/* === Textformatierungen === */
.contentbold{ font-weight: 700 }
.contentitalic{ font-style: italic }
.contentunderlined{ text-decoration: underline }
.contentstrikethrough{ text-decoration: line-through }
.fontsize{ font-size: 1.125em } /* generischer Boost; Editor kann die Klasse setzen */

/* === Tabellenbausteine === */
table.contenttable{
  width: 100%; 
    border: .059em solid #d1d5db; 
    border-collapse: collapse; 
    border-radius: var(--radius); 
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
th.contenttable{
  border: .059em solid #d1d5db;
  background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
  text-align: left; 
    padding: .5rem; 
    font-weight: 600;
}
td.contenttable1, td.contenttable2, .contenttablecell{
  border: .059em solid #e5e7eb; 
    text-align: center; 
    padding: .5rem;
}
td.contenttable1{ background: #ffffff; }
td.contenttable2{ background: #f9fafb; }

/* Bilder mit Bildunterschrift */
figure{ margin: 1.2em 0; }
figcaption, .imagesubtitle{
  display:block;
  font-size:.875rem;
  color: var(--clr-muted);
  text-align:center;
  margin-top:.35rem;
  line-height: 1.3;    
}
/* Gemeinsame Basis für Contentbilder */
img.contentimage,
img.leftcontentimage,
img.rightcontentimage {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.contentimage{ 
    display: inline-block; 
    max-width: 100% 
}
span.contentimage, span.leftcontentimage, span.rightcontentimage {
    display:block; 
    font-size:.85em; 
    color:#555; 
    line-height:1.2; 
    text-align:center; 
    margin-top:.25rem 
}
/* === Floating Images (mozilo) — robust & responsiv === */
/* (Container fängt Floats automatisch ab (kein „Überlaufen“) 
Anwendung: Bild (left- / right); ohne ENTER weiter = wird gefloatet.
ENTER erzeugt Absatz und löst Clear aus */

/* Weitere Box-Elemente hier einfügen; Container als Float-Rahmen */
.content, .box, .section .wrapper {
  display: flow-root; /* moderner clearfix */
}
/* Float links/rechts + Abstände */
img.leftcontentimage,
span.leftcontentimage { 
  float: left;
  margin: .35em .9em .75em 0;
  max-width: min(100%, 18rem);
}
img.rightcontentimage,
span.rightcontentimage { 
  float: right;
  margin: .35em 0 .75em .9em;
  max-width: min(100%, 18rem);
}
/* Benutzerelement [clear] für erzwungenes Float Ende 
clear = <div class="clear"></div>  Anwendung [clear] */
.clear { clear: both; }

/* Optional: schöner Textfluss an Rundungen/Kanten (wenn Bilder genug groß) */
@supports (shape-outside: circle(50%)) {
  img.leftcontentimage   { shape-outside: inset(0 round 12px); }
  img.rightcontentimage  { shape-outside: inset(0 round 12px); }
  /* Tip: bei sehr runden Motiven:
     img.leftcontentimage { shape-outside: circle(50%); } */
}
/* === Content Style === */
.main { 
    background: #f8f9fa;       /* leichtes Grau statt reines Weiß #f8f9fa */
    color: #222;               /* satte Textfarbe */
}
/* Headings im Content */
.main h2 {
    color: var(--clr-primary);   /* Primärfarbe → Bezug zum Header */
}
.main h3 {
    color: #333;                 /* neutral dunkler, kein Bunt-Overload */
}
/* Ausnahme: Überschriften in .parallax-Abschnitten → immer weiß */
.section.parallax h2,
.section.parallax h3 {
  color: #fff;
}
/* Abschnitt normal ohne Hintergrund Parallaxe */
.section:not(.parallax) .wrapper{ 
  background: #fff;          /* weiße Fläche für Content */
  box-shadow: 0 2px 6px rgba(0,0,0,.06); /* dezenter Schatten */
  padding: 2rem;
}
/* Footer */
.footer p {
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 1.5rem 1rem;
}
.footer a, .footer a:hover {
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
    padding: .3rem;
}
.footer a:hover {
    font-weight: 700;
}
/* === GridContainer mit GridBoxen === 
Element Grid Rahmen wird über .content-grid angesprochen
grid_container = <div class="content-grid {DESCRIPTION}">{VALUE}</div>
Anwendung : [grid_container={DESCRIPTION}|{VALUE}]
{DESCRIPTION} (opt.) kann zusätzlicheh Klassen für Containergestaltung bekommen
{VALUE} nimmt komplettes Element content-box / content-box-plain auf
*/
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-box-wide), 1fr));
  gap: 1.5rem;                     /* Abstand zwischen Boxen */
  max-width: var(--grid-content-wide);   /* maximal ~????px breit */
  margin-inline: auto;             /* immer zentriert */
  padding: 1rem;                   /* etwas Luft innen */
}
/* === grid-box ===
Element grid-box über klasse . content-box angesprochen
mit Überschrift, farbiger Markierung etc. 
grid_box = <div class="content-box"><h3>{DESCRIPTION}</h3><p>{VALUE}</p></div>
Anwendung: [grid_box={DESCRIPTION}|{VALUE}]
{DESCRIPTION} Gridelement Überschrift
{VALUE} Grid-Inhalt
*/
.content-box {
  position: relative;    
  background: #fff;                /* später z. B. var(--clr-surface) */
  border: 1px solid #ddd;          /* dünner Rahmen in Entwicklungsphase */
  border-radius: .5rem;            /* abgerundete Ecken */
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Bilder in Boxen neutral behandeln */
.content-box img{
  display:block;
  max-width:100%;
  height:auto;
  border:none;
  box-shadow:none;
  border-radius:.35rem;
}

/* H3-Deko (deine Variante D) nur für echte Titel */
.content-box > h3{
  font-size: 1.2rem;
  font-weight: 600;
  padding-left: .75rem;
  border-left: 4px solid var(--clr-primary);
  margin: 0 0 .75rem;
}

/* H3 ausblenden, wenn leer/whitespace → keine Deko-Linie */
.content-box > h3:empty { display:none; }
.content-box > h3:empty + * { margin-top: 0; } /* kein Extraluftloch */

.content-box:hover {
  transform: translateY(-4px);     /* kleine Interaktion */
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* === grid-box-plain ===
Element grid-box-plain über klasse . content-box-plain angesprochen 
alle extras weggelassen 
Alternative zu content-box Baseline – wirklich „plain“ 
grid_box_plain = <div class="content-box-plain {DESCRIPTION}">{VALUE}</div>
Anwendung : [grid_box_plain={DESCRIPTION}|{VALUE}]
*/
.content-box-plain{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: relative;
}

/* Falls versehentlich ein H3 gesetzt wird → nicht anzeigen */
.content-box-plain > h1,
.content-box-plain > h2,
.content-box-plain > h3 { display:none; }

/* Medien in der Plain-Box: full-bleed, ohne Rahmen/Schatten */
.content-box-plain img,
.content-box-plain picture,
.content-box-plain video{
  display:block;
  width:100%;
  height:auto;
  border:0;
  box-shadow:none;
  border-radius: 0;           /* absolut flach */
}

/* Modifier-Klassen für content-box-plain 
1) Abgerundete Medien (z. B. „rounded“) 
Aufruf: [grid_box_plain=rounded|[bild|@=Home:medi-1.JPG=@]]
weitere Klassen mit zugehöriger Style-Definition  hier anlegen
*/
.content-box-plain.rounded img,
.content-box-plain.rounded picture,
.content-box-plain.rounded video{
  border-radius: .5rem;
  overflow:hidden;
}

/* === Status/Fehler/sonstiges === */
.deadlink{ color:#b91c1c; text-decoration: underline wavy }

/* === Media Queries === */
/* Breakpoints: 350, 420, 600, 768, 1024, 1200, 1400 */

/* 1. Bewegungs-Reduktion beachten */
@media (prefers-reduced-motion: reduce){
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 2. Kleinste Bildschirme (<350px) notfalls wieder schrumpfen */
@media (max-width: 350px) {
  .mainmenu-item a,
  a.menu,
  a.menuactive {
    font-size: .8rem;
    padding: .35rem .6rem;
  }
}

/* 3. Extra-Schrumpfung Sitename bei sehr schmalen Screens */
@media (max-width: 420px){

}

/* 4. Kleiner 600px Floats aufheben (stacken) */
@media (max-width: 599px) {
  img.leftcontentimage,
  span.leftcontentimage,
  img.rightcontentimage,
  span.rightcontentimage {
    float: none;
    margin: 0 0 1rem 0;   /* untereinander, voller Textfluss */
    max-width: 100%;
  }
}

/* 5. Ab Tablet (600px) Menü & Parallax anpassen */
@media (min-width: 600px) {
  .mainmenu-item a,
  a.menu,
  a.menuactive {
    font-size: 1.2rem;
    padding: .7rem .9rem;
  }
  .mainmenu {
    padding: .7rem 0;
  }
  .parallax { 
    --parallax-min: 35vh; 
    min-height: var(--parallax-min);
  }
  .hero { 
    --hero-min: 55vh; 
    min-height: var(--hero-min);
  }  
}
/* 6. Ab 768px (Tablets quer, kleine Laptops hochkant) */
@media (min-width: 768px){
  .mainmenu-item a,
  a.menu,
  a.menuactive {
    padding: .9rem .9rem;
  }    
  .mainmenu {
    padding: 1rem 0;
  }  
  .branding{
    max-width: var(--container-w, min(90rem, 92%));
    margin-inline: auto;
  }
}

/* 7. Ab 1024px (große Tablets / kleine Laptops quer) */
@media (min-width: 1024px){
  body {
    font-size: 17px; /* leicht größere Grundschrift */
  }
  .branding{ min-height: 84px; }  
  body[data-logo="on"] .site-logo{
    max-height: clamp(72px, 10vw, 160px);
  }  
  /* Volle Breite, wenn nur 1 Box */
  .content-grid > :only-child {
    grid-column: 1 / -1;
  }
}
/* 8. 1200px (klassische Desktop-Breite) */
@media (min-width: 1200px){
  body {
    font-size: 18px;
  }
  .section {
    padding: calc(var(--section-pad) * 1.2) 0;
  }
}

/* 9. 1400px (große Monitore) */
@media (min-width: 1400px){
  body {
    font-size: 19px;
  }
}

/* Sonderbehandlung von einzelnen Seiten; z. B. bei Impressum oder Datenschutz 
separat voneinander kann ausgeblenet werden:
- .hero (Hauptbild oben)
- .extra-sections (Abschnitte 1 bis n; als Block)
*/

/* Button zurück
Back-Leiste standardmäßig ausblenden;  */
.backbar { 
    display: none; 
    margin-bottom: .75rem; 
}
/* Button-Style (neutral) */
.backbutton{
  appearance: none; border: 1px solid rgba(0,0,0,.15);
  background: #fff; color: var(--clr-text);
  padding: .4rem .7rem; border-radius: .5rem; cursor: pointer;
}
.backbutton:hover{ background: #f5f5f5 }

/* Seiten, die NUR den Content zeigen sollen (ohne Hero & Extra-Sektionen) */
body:is([data-page="Impressum"],
        [data-page="Datenschutz"],
        [data-page="Kontakt"],
        [data-page="Impressionen"]) .hero,
body:is([data-page="Impressum"],
        [data-page="Datenschutz"],
        [data-page="Kontakt"],
        [data-page="Impressionen"]) .extra-sections {
  display: none;
}
/* Zurück-Button auf diesen Seiten einblenden */
body:is([data-page="Impressum"],
        [data-page="Datenschutz"],
        [data-page="Kontakt"],
        [data-page="Impressionen"]) .backbar {
  display: block;
}

/* Einfache Variaten, Abschnitte ausblenden - keine versteckte Seite Abschnitt_2 bis n erst anlegen; komplette Sektion ausblenden, wenn irgendwo darin ein .deadlink auftaucht */
.section:has(.deadlink) { display: none; }