/* =========================================================================
   Tutu Bau & Service – Stil, abgeleitet aus dem Logo
   Anthrazit #4f4c4d · Grün #3f6b26
   ========================================================================= */

:root {
  --anthrazit: #4f4c4d;   /* Logo-Grau */
  --dunkel:    #322f30;   /* dunkle Flächen */
  --tiefdunkel:#232122;   /* Footer */
  --gruen:     #3f6b26;   /* Logo-Grün */
  --gruen-hell:#80b365;   /* Grün auf dunklem Grund */
  --text:      #2f2d2e;
  --text-hell: #6d6a6b;
  --linie:     #e2e0e0;
  --flaeche:   #f5f3ef;
  --stern:     #d9a441;   /* Sterne in Bewertungen */
  --altweiss:  #f2efe9;
  --weiss:     #ffffff;

  --max: 1240px;
  --font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  padding-bottom: 60px;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0 0 .5em; font-weight: 700; line-height: 1.18; letter-spacing: -.015em; color: var(--text); }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.22rem; }

p { margin: 0 0 1.15em; }
a { color: var(--gruen); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.eng { max-width: 800px; }

section { padding: 76px 0; }
@media (min-width: 900px) { section { padding: 104px 0; } }

.flaeche { background: var(--flaeche); }
.dunkel { background: var(--dunkel); color: #d8d6d6; }
.dunkel h2, .dunkel h3 { color: var(--weiss); }
.dunkel a:not(.knopf) { color: var(--gruen-hell); }

.vor {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: 18px;
}
.dunkel .vor { color: var(--gruen-hell); }

.gross { font-size: 1.14rem; color: var(--text-hell); max-width: 66ch; }
.dunkel .gross { color: #b9b6b7; }

/* ------------------------------------------------------------- Knöpfe -- */

.knopf {
  display: inline-block;
  padding: 16px 34px;
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf-gruen { background: var(--gruen); color: #fff; }
.knopf-gruen:hover { background: #34581f; }
.knopf-dunkel { background: var(--dunkel); color: #fff; }
.knopf-dunkel:hover { background: #000; }
.knopf-rand { border-color: currentColor; color: var(--text); }
.knopf-rand:hover { background: var(--text); color: #fff; border-color: var(--text); }
.dunkel .knopf-rand, .kopfbild .knopf-rand { color: #fff; border-color: rgba(255,255,255,.5); }
.dunkel .knopf-rand:hover, .kopfbild .knopf-rand:hover { background: #fff; color: var(--text); border-color: #fff; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

/* -------------------------------------------------------------- Kopf --- */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: var(--altweiss);
  border-bottom: 1px solid var(--linie);
}
.kopf .wrap {
  max-width: 1440px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 92px;
  padding-left: 14px; padding-right: 18px;
}

.marke { flex: none; }
.marke img { height: 52px; width: auto; }
@media (min-width: 900px) { .marke img { height: 76px; } }

/* rechte Spalte: Kontaktzeile über dem Menü */
.kopf-rechts { display: none; }
@media (min-width: 1220px) {
  .kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
}
.kontaktzeile { display: flex; align-items: center; gap: 20px; font-size: .87rem; color: var(--text-hell); white-space: nowrap; }
.kontaktzeile a { color: var(--text); text-decoration: none; font-weight: 600; }
.kontaktzeile a:hover { color: var(--gruen); }
.kontaktzeile .tel { font-size: 1.04rem; font-weight: 700; color: var(--gruen); }
.kontaktzeile .trenn { color: #cfcbc4; }

.menue { display: none; }
@media (min-width: 1220px) { .menue { display: flex; align-items: center; gap: 2px; } }
.menue > a, .menue > div > a {
  display: block; padding: 10px 13px; white-space: nowrap;
  font-size: .93rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text); text-decoration: none;
}
.menue > a:hover, .menue > div > a:hover { color: var(--gruen); }
.menue > a.hier { box-shadow: inset 0 -2px 0 var(--gruen); }

/* Aufklappmenü */
.klapp { position: relative; }
.klapp > a::after { content: "▾"; margin-left: 7px; font-size: .8em; color: var(--text-hell); }
.klapp-inhalt {
  position: absolute; top: 100%; left: 0;
  min-width: 300px; background: #fff;
  border: 1px solid var(--linie); border-top: 2px solid var(--gruen);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: .16s ease;
}
.klapp:hover .klapp-inhalt, .klapp:focus-within .klapp-inhalt { opacity: 1; visibility: visible; transform: none; }
.klapp-inhalt a {
  display: block; padding: 13px 20px;
  font-size: .93rem; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.klapp-inhalt a:last-child { border-bottom: 0; }
.klapp-inhalt a:hover { background: var(--flaeche); color: var(--gruen); }

.nav-knopf { margin-left: 12px; padding: 12px 20px !important; white-space: nowrap; }

.burger {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--dunkel); color: #fff; border: 0; cursor: pointer;
}
@media (min-width: 1220px) { .burger { display: none; } }
.burger svg { width: 22px; height: 22px; }

.mobil { display: none; background: #fff; border-top: 1px solid var(--linie); }
.mobil.auf { display: block; }
.mobil a {
  display: block; padding: 15px 24px; text-decoration: none;
  font-weight: 600; color: var(--text); border-bottom: 1px solid var(--linie);
}
.mobil a.tief { padding-left: 44px; font-weight: 400; font-size: .94rem; color: var(--text-hell); }

/* ------------------------------------------------------------ Kopfbild -- */

.kopfbild { position: relative; background: var(--dunkel); color: #fff; overflow: hidden; }
.kopfbild-foto { position: absolute; inset: 0; background-size: cover; background-position: center; }
.kopfbild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(26,24,25,.86) 0%, rgba(26,24,25,.66) 40%, rgba(26,24,25,.22) 70%, rgba(26,24,25,.14) 100%),
    linear-gradient(180deg, rgba(26,24,25,.42) 0%, rgba(26,24,25,.10) 40%, rgba(26,24,25,.55) 100%);
}
.kopfbild .wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
@media (min-width: 900px) { .kopfbild .wrap { padding-top: 168px; padding-bottom: 152px; } }
.kopfbild h1 { color: #fff; max-width: 20ch; }
.kopfbild .gross { color: #dcdada; max-width: 56ch; font-size: 1.2rem; }
.kopfbild .vor { color: var(--gruen-hell); }

.claim {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 1.02rem; font-style: italic; color: #cfcdcd; max-width: 46ch;
}

/* Kopf für Unterseiten */
.unterkopf { background: var(--dunkel); color: #fff; padding: 58px 0 54px; }
.unterkopf h1 { color: #fff; }
.unterkopf .gross { color: #b9b6b7; }
.pfad { font-size: .84rem; color: #8e8b8c; margin-bottom: 16px; }
.pfad a { color: #c3c1c1; text-decoration: none; }
.pfad a:hover { color: var(--gruen-hell); }

/* --------------------------------------------------------------- Raster -- */

.zwei { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .zwei { grid-template-columns: 1fr 1fr; gap: 66px; } }
.zwei-breit { display: grid; gap: 40px; }
@media (min-width: 940px) { .zwei-breit { grid-template-columns: 1.05fr .95fr; gap: 66px; align-items: center; } }

.drei { display: grid; gap: 26px; }
@media (min-width: 760px) { .drei { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------- Leistungskacheln -- */

.bereiche { display: grid; gap: 2px; background: var(--linie); }
@media (min-width: 720px) { .bereiche { grid-template-columns: 1fr 1fr; } }

.bereich {
  position: relative; display: block; overflow: hidden;
  background: var(--dunkel); color: #fff; text-decoration: none;
  min-height: 300px;
}
@media (min-width: 720px) { .bereich { min-height: 340px; } }
.bereich-foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform .5s ease;
}
.bereich::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,28,29,.15) 0%, rgba(30,28,29,.55) 55%, rgba(30,28,29,.9) 100%);
  transition: background .3s ease;
}
.bereich:hover .bereich-foto { transform: scale(1.07); }
.bereich:hover::after { background: linear-gradient(180deg, rgba(35,50,25,.25) 0%, rgba(30,28,29,.6) 55%, rgba(30,28,29,.93) 100%); }

.bereich-text { position: relative; z-index: 2; padding: 32px 30px; margin-top: auto; }
.bereich { display: flex; flex-direction: column; justify-content: flex-end; }
.bereich-text h3 { color: #fff; margin-bottom: .35em; font-size: 1.35rem; }
.bereich-text p { color: #cfcdcd; font-size: .96rem; margin: 0; max-width: 44ch; }
.bereich-text .mehr {
  display: inline-block; margin-top: 14px;
  font-size: .86rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gruen-hell);
}
.bereich-text .mehr::after { content: " →"; }

.bereich-gross { grid-column: 1 / -1; min-height: 380px; }

/* ------------------------------------------------------------- Prinzip -- */

.prinzip { border-top: 2px solid var(--gruen); padding-top: 24px; }
.prinzip h3 { margin-bottom: .4em; }
.prinzip p { color: var(--text-hell); font-size: .98rem; margin: 0; }
.dunkel .prinzip p { color: #b9b6b7; }

/* ------------------------------------------------------------ Galerie --- */

.streifen { display: grid; gap: 18px; }
@media (min-width: 760px) { .streifen { grid-template-columns: repeat(3, 1fr); } }
.streifen figure { margin: 0; position: relative; overflow: hidden; }
.streifen img { width: 100%; aspect-ratio: 9/11; object-fit: cover; transition: transform .5s ease; }
.streifen figure:hover img { transform: scale(1.05); }
.streifen figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 22px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(25,23,24,.86) 100%);
  color: #fff; font-size: .95rem;
}
.streifen figcaption b { display: block; font-size: 1.05rem; margin-bottom: 3px; }

/* -------------------------------------------------------------- Listen -- */

.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.liste li { position: relative; padding-left: 26px; }
.liste li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 12px; height: 2px; background: var(--gruen);
}

/* ------------------------------------------------------------ Kontakt --- */

.kontaktdaten { display: grid; gap: 22px; }
.kontaktdaten dt { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-hell); font-weight: 700; }
.dunkel .kontaktdaten dt { color: #9d9a9b; }
.kontaktdaten dd { margin: 5px 0 0; font-size: 1.08rem; }
.kontaktdaten dd a { text-decoration: none; }

/* --------------------------------------------------------------- Fuß ---- */

.fuss { background: var(--tiefdunkel); color: #a9a6a7; padding: 66px 0 0; font-size: .94rem; }
.fuss img { height: 54px; width: auto; margin-bottom: 20px; }
.fuss h3 { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.fuss a { color: #c6c3c4; text-decoration: none; }
.fuss a:hover { color: var(--gruen-hell); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss-raster { display: grid; gap: 38px; }
@media (min-width: 800px) { .fuss-raster { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.fuss-unten {
  margin-top: 50px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  font-size: .84rem; color: #858283;
}

/* ------------------------------------------------------- Handy-Leiste --- */

.handyleiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) { .handyleiste { display: none; } }
.handyleiste a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 8px; text-decoration: none; font-weight: 700; font-size: .95rem;
  background: var(--dunkel); color: #fff;
}
.handyleiste a + a { background: var(--gruen); }
.handyleiste svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------- Notiz --- */

.notiz {
  background: #fbf6e8; border: 1px dashed #c9a227;
  padding: 18px 22px; font-size: .92rem; color: #5c4d18;
}
.platzhalter { color: #b00020; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===================================================== weitere Bausteine == */

/* Karten */
.karte { background: #fff; border: 1px solid var(--linie); padding: 28px 26px; }
.dunkel .karte { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.karte h3 { margin-bottom: .45em; }
.karte p { color: var(--text-hell); font-size: .97rem; margin: 0; }
.dunkel .karte p { color: #b9b6b7; }

/* nummerierte Schritte */
.schritte { display: grid; gap: 26px; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.schritt { border-top: 2px solid var(--gruen); padding-top: 22px; }
.schritt b { display: block; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin-bottom: 10px; }
.schritt h3 { font-size: 1.15rem; margin-bottom: .4em; }
.schritt p { color: var(--text-hell); font-size: .96rem; margin: 0; }

/* Fragen und Antworten */
.fragen { display: grid; gap: 10px; max-width: 860px; }
.fragen details { background: #fff; border: 1px solid var(--linie); padding: 20px 24px; }
.fragen details[open] { border-color: #cfcbc4; }
.fragen summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--gruen); font-size: 1.4rem; line-height: 1; flex: none; }
.fragen details[open] summary::after { content: "\2212"; }
.fragen p { margin: 14px 0 0; color: var(--text-hell); font-size: .97rem; }

/* Formular */
.formular { display: grid; gap: 18px; }
.feld { display: grid; gap: 7px; }
.feld label { font-weight: 700; font-size: .92rem; }
.feld input, .feld select, .feld textarea {
  font-family: inherit; font-size: 1rem; padding: 13px 14px;
  border: 1px solid #cfcbc4; background: #fff; color: var(--text); width: 100%;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--gruen); outline: none; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld-hinweis { font-size: .84rem; color: var(--text-hell); }
.feld-reihe { display: grid; gap: 18px; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--text-hell); }
.zustimmung input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--gruen); }
.honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Rechtstexte */
.rechtstext { max-width: 820px; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 1.9em; }
.rechtstext h3 { font-size: 1.05rem; margin-top: 1.4em; }
.rechtstext p, .rechtstext li { color: var(--text-hell); font-size: .97rem; }
.rechtstext ul { padding-left: 20px; }

/* Referenzgalerie mit sechs Bildern */
.galerie { display: grid; gap: 18px; }
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; position: relative; overflow: hidden; }
.galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.galerie figure:hover img { transform: scale(1.05); }
.galerie figcaption { padding: 16px 2px 0; font-size: .93rem; color: var(--text-hell); }
.galerie figcaption b { display: block; color: var(--text); font-size: 1.03rem; margin-bottom: 3px; }
.galerie .daten { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .84rem; color: #8e8b8c; }
.galerie .daten span::before { content: "\00B7\00A0"; }
.galerie .daten span:first-child::before { content: ""; }

/* Bild mit Rahmenabstand */
.bildblock img { width: 100%; }

/* ==================================================== Bewertungen ======== */

.sterne { display: inline-flex; gap: 2px; font-size: 1.05rem; line-height: 1; color: var(--stern); letter-spacing: .04em; }
.sterne .leer { color: #d6d2cc; }
.dunkel .sterne .leer { color: rgba(255,255,255,.25); }
.sterne-gross { font-size: 1.5rem; }

.bewertungen { display: grid; gap: 20px; }
@media (min-width: 760px) { .bewertungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .bewertungen { grid-template-columns: repeat(3, 1fr); } }

.bewertung {
  background: #fff; border: 1px solid var(--linie);
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px;
}
.bewertung > p { margin: 0; color: var(--text-hell); font-size: .99rem; line-height: 1.66; }
.bewertung footer { margin-top: auto; padding-top: 4px; display: grid; gap: 3px; }
.bewertung footer b { font-size: .99rem; color: var(--text); }
.bewertung footer span { font-size: .83rem; color: #8e8b8c; }
.bewertung .antwort {
  border-left: 2px solid var(--gruen); padding: 4px 0 4px 16px; margin-top: 4px;
}
.bewertung .antwort b { display: block; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gruen); margin-bottom: 6px; }
.bewertung .antwort p { margin: 0; font-size: .93rem; color: var(--text-hell); }

/* Kennzahlenzeile über den Bewertungen */
.bewertungs-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding: 22px 26px; background: var(--flaeche); border: 1px solid var(--linie);
  margin-bottom: 34px;
}
.bewertungs-kopf .zahl { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.bewertungs-kopf .dazu { font-size: .92rem; color: var(--text-hell); }

/* Quelle: Google oder Webseite */
.quelle { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #8e8b8c; }

/* Sternauswahl im Formular */
.sternwahl { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.sternwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sternwahl label {
  font-size: 2.1rem; line-height: 1; color: #d6d2cc; cursor: pointer;
  padding: 2px 3px; transition: color .15s ease;
}
.sternwahl input:checked + label,
.sternwahl input:checked + label ~ label { color: var(--stern); }
.sternwahl:hover label { color: #d6d2cc; }
.sternwahl label:hover,
.sternwahl label:hover ~ label { color: var(--stern); }
.sternwahl input:focus-visible + label { outline: 2px solid var(--gruen); outline-offset: 2px; }

/* Hinweis nach § 5b Abs. 3 UWG */
.bewertungs-hinweis {
  border-top: 1px solid var(--linie); margin-top: 44px; padding-top: 22px;
  font-size: .86rem; color: #8e8b8c; max-width: 78ch; line-height: 1.7;
}
.bewertungs-hinweis b { color: var(--text-hell); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Google-Zitate: zwei breite Spalten, die Texte sind lang */
@media (min-width: 900px) { .bewertungen-zwei { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .bewertungen-zwei { grid-template-columns: repeat(2, 1fr); } }

/* Auf der Startseite gekürzt – der volle Text steht auf der Bewertungsseite */
.bewertungen-kurz .bewertung > p {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quellenhinweis unter fremden Produktabbildungen */
.quellenhinweis {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: .86rem; color: #8e8b8c; max-width: 74ch; line-height: 1.7;
}
.quellenhinweis a { color: var(--gruen); }