/* Tischlerei George – eigenes Stylesheet zu Bootstrap 5 (von Mario; Gestaltung entschieden in E13) */
/* Akzentfarbe: das Grün des Logos (#3C957F), für Schrift und Knöpfe etwas dunkler, damit es auf
   Weiß gut lesbar ist (E13, Frage 2). Bei Mario war es Holzbraun (#8a5a2b). Genau so hell, dass
   Links ohne Unterstreichung sich von der Textfarbe abheben (WCAG: mindestens 3 : 1 zu --ink, hier
   3,02 : 1) und auf Weiß lesbar bleiben (5,05 : 1). */
:root {
  --akzent: #307b68;
  --akzent-dunkel: #1f5446;
  --akzent-hell: #edf5f2;
  --ink: #2b2420;
}
body { color: var(--ink); background: #fff; }
/* Links wie auf der alten Seite: unterstrichen erst beim Mouseover und mit der Tastatur (E13, Punkt 6).
   Bootstrap 5 unterstreicht sonst immer. Links mit Klasse (Knöpfe, Menü, Teaser, Galerie) bleiben
   ohne Unterstreichung. */
a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-dunkel); }
a:not([class]):hover, a:not([class]):focus-visible { text-decoration: underline; }

.navbar { background: #fff; border-bottom: 4px solid var(--akzent); }
.navbar .logo { height: 60px; width: auto; }
/* Am Desktop (Menü ausgeklappt) so groß wie auf der alten Seite: 240 × 87 px (Thomas, 06.11.2026:
   „wirkt dort so winzig"). Die Datei ist 180 px hoch, also auch dann doppelt aufgelöst. */
@media (min-width: 992px) { .navbar .logo { height: 87px; } }
.navbar .nav-link { color: var(--ink); font-weight: 600; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--akzent); }
.dropdown-item.active, .dropdown-item:active { background: var(--akzent); }

/* Kopfbild über die ganze Breite: bei Mario stand es im Inhaltsrahmen, links und rechts blieben
   12 px hellgrüne Streifen, und das 980 px breite Bild wurde auf 956 px verkleinert. */
.banner img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.page-title { background: var(--akzent-hell); border-bottom: 1px solid #d3e6df; padding: 1.25rem 0; }
.page-title h1 { color: var(--akzent-dunkel); font-size: 1.9rem; font-weight: 700; margin: 0; }

.intro { font-size: 1.1rem; }
.dropcap { float: left; font-size: 3.2rem; line-height: .9; padding: .2rem .5rem 0 0; color: var(--akzent); }
.message { background: var(--akzent-hell); border-left: 4px solid var(--akzent); padding: 1rem 1.25rem; border-radius: .25rem; }
.referenzen { list-style: none; padding-left: 0; }
.referenzen li { padding: .4rem 0 .4rem 1.6rem; position: relative; }
.referenzen li::before { content: "\2605"; color: var(--akzent); position: absolute; left: 0; }
.feature { background: var(--akzent-hell); border-left: 4px solid var(--akzent); border-radius: .25rem; padding: 1rem; }
/* Symbole grün wie auf der alten Seite (dort die Icon-Schrift „info-circled" und „tools" in Grün).
   Mario hatte Schriftzeichen gesetzt (ℹ ⚒), die je nach Gerät als Emoji erscheinen -- am Mac ein
   blaues Kästchen -- und das Grün nicht annehmen. Jetzt zwei eigene kleine Zeichnungen als Maske,
   gefärbt mit der Akzentfarbe; nichts wird von außen geladen. */
.feature-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-right: .1em; background-color: var(--akzent); -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; }
.symbol-info { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 3.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3zM6.9 6.9h2.2v5.9H6.9z'/%3E%3C/svg%3E"); }
.symbol-werkzeug { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='rotate(40 8 8) translate(8 8) scale(.86) translate(-8 -8)'%3E%3Cpath d='M2.2 1.2h8.6l3.6 1.9v1.4l-3.6 1.9H2.2a.7.7 0 0 1-.7-.7V1.9a.7.7 0 0 1 .7-.7z'/%3E%3Crect x='6.7' y='5.2' width='2.6' height='10.6' rx='1.1'/%3E%3C/g%3E%3C/svg%3E"); }
.kontaktbox p { color: var(--akzent-dunkel); }
/* Kontaktseite: Knopf zum Anrufen bzw. Schreiben, daneben „Kopieren" (E13, Punkt 9). Am Handy
   füllt der Hauptknopf die Zeile, „Kopieren" bleibt daneben. */
.kontaktweg { display: flex; gap: .5rem; margin-bottom: .5rem; }
.kontaktweg .btn { white-space: nowrap; padding: .6rem .85rem; font-size: 1.05rem; }  /* 44 px hoch */
.kontaktweg > a { flex: 1 1 auto; }
@media (min-width: 576px) { .kontaktweg > a { flex: 0 1 auto; min-width: 14rem; } }  /* Knöpfe gleich breit, „Kopieren" untereinander */
.btn-outline-akzent.kopiert, .btn-outline-akzent.kopiert:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.adresse { border-left: 4px solid var(--akzent); padding-left: 1rem; font-weight: 600; }

/* Überschriften kleiner als bei Bootstrap, im Verhältnis wie auf der alten Seite (h1 22 px, h2 16 px,
   h3 14 px; Thomas, 06.11.2026: „h2s wirken überdimensioniert"). Bootstrap machte h2 am Desktop
   32 px groß, größer als die h1 (30,4 px). Jetzt h1 30,4 / h2 21,6 / h3 19,2 px auf allen Geräten;
   die h2 so groß wie in Impressum und Datenschutz. */
.section-title { color: var(--akzent-dunkel); font-weight: 700; margin-bottom: 1rem; font-size: 1.35rem; }
main .h4 { font-size: 1.2rem; }
.teaser { display: block; height: 100%; padding: 1.5rem; background: var(--akzent-hell); border-left: 4px solid var(--akzent); color: inherit; text-decoration: none; border-radius: .25rem; }
.teaser:hover { background: #dcece6; }
/* Die drei Karten auf „Unsere Produkte" gleich hoch: alle Bilder im Format 3 : 2. Bei Mario waren
   zwei Bilder quer (300 × 200), eins hoch -- in den Karten Küchen und Möbel blieb viel Leerraum. */
.card-img-top { aspect-ratio: 3 / 2; object-fit: cover; }
.leistungen div { background: var(--akzent-hell); border-left: 4px solid var(--akzent); border-radius: .25rem; font-weight: 600; }

.slide-img { max-height: 560px; object-fit: cover; }
.carousel-caption { background: rgba(30,20,10,.6); border-radius: .25rem; padding: .5rem 1rem; }
/* Karussell: Bildunterschrift über den Strichen statt darauf; Pfeile und Striche auch auf hellen
   Fotos sichtbar (bei Mario dünne weiße Pfeile ohne Grund, auf hellen Küchenfotos kaum zu sehen). */
.carousel-caption { bottom: 2.5rem; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 2.75rem; height: 2.75rem; background-color: rgba(0,0,0,.45); background-size: 50%; border-radius: 50%; }
.carousel-control-prev, .carousel-control-next { opacity: .85; }
.carousel-indicators { filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); }

.gallery-link { display: block; position: relative; overflow: hidden; border-radius: .25rem; }
.gallery-img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; display: block; transition: transform .2s; }
.gallery-link:hover .gallery-img { transform: scale(1.05); }
.gallery-title { position: absolute; inset: auto 0 0 0; background: rgba(30,20,10,.75); color: #fff; font-size: .75rem; line-height: 1.2; padding: .3rem .4rem; opacity: 0; transition: opacity .2s; }
.gallery-link:hover .gallery-title, .gallery-link:focus .gallery-title { opacity: 1; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 2.5rem; line-height: 1; width: 3rem; height: 4rem; }
.lb-prev { left: .5rem; } .lb-next { right: .5rem; }
.lb-nav[hidden] { display: none; }

.btn-akzent { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.btn-akzent:hover, .btn-akzent:focus { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.btn-outline-akzent { border-color: var(--akzent); color: var(--akzent); }
/* Füllen beim Mouseover nur, wo es eine Maus gibt -- am Handy bliebe der Knopf nach dem Tippen grün */
@media (hover: hover) { .btn-outline-akzent:hover { background: var(--akzent); color: #fff; } }

.cta { background: var(--akzent-hell); }
.cta h2 { color: var(--akzent-dunkel); }

.site-footer { background: var(--ink); color: #d9cfc6; }
.site-footer h2 { color: #fff; }
.site-footer a { color: #b9e0d4; }

.legal { overflow-wrap: anywhere; }
.legal h2 { font-size: 1.35rem; margin-top: 2rem; }
.legal > h2:first-child { margin-top: 0; }  /* sonst oben doppelter Abstand gegenüber den anderen Seiten */
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; }

/* Einleitung der Startseite: normal statt ganz fett, etwas größer (E13, Frage 5) */
.intro { font-size: 1.15rem; }

/* Desktop wie die alte Seite (E13, Fragen 3 und 4): die Seite höchstens 980 px breit -- so lang
   sind die Zeilen gut lesbar, und die Kopfbilder (980 px) erscheinen in ihrer echten Breite, also
   scharf --, links und rechts die Holz-Kachel der alten Seite. Erst ab 1.000 px Fensterbreite;
   schmaler (Tablet, Handy) bleibt alles wie gehabt. */
@media (min-width: 1000px) {
  html { background: #e9dcc8 url("/wp-content/uploads/retina_wood.png") repeat; }
  body { max-width: 980px; margin: 0 auto; box-shadow: 0 0 14px rgba(0, 0, 0, .35); }
  .container { max-width: 100%; }
}