/* ============================================================
lechardon.css – gemeinsames Stylesheet Le Chardon (Responsive Neubau)
Eine Quelle fuer Farben, Schriften, Groessen aller neuen Seiten.
Einbinden im :
(aus einem Unterordner: href="../lechardon.css")
Font-Pfade sind relativ zu DIESER Datei -> funktionieren aus jeder Seitentiefe.
Zeichensatz der Seiten: UTF-8.
============================================================ */
/* ---------- Schriften (lokal, datenschutzkonform) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-500.woff2") format("woff2"),url("fonts/cormorant-500.woff") format("woff");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/cormorant-600.woff2") format("woff2"),url("fonts/cormorant-600.woff") format("woff");}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2"),url("fonts/inter-400.woff") format("woff");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2"),url("fonts/inter-500.woff") format("woff");}
/* ---------- Design-Tokens (zentrale Stellschrauben) ---------- */
:root{
--bg:#191919; /* Seitenhintergrund (dunkel) */
--bg-soft:#232323; /* Navigationsleiste, Menue */
--card:#262523; /* Karten-Hintergrund */
--text:#ececec; /* Standard-Textfarbe (hell) */
--muted:#b3b0a8; /* gedaempfter Text */
--line:#3a3937; /* Trennlinien/Rahmen */
--gold:#c9a24b; /* Goldakzent (Buttons, Linien) */
--gold-soft:#e2c583; /* Gold hell (Links, Hover) */
--font-head:"Cormorant Garamond",Georgia,"Times New Roman",serif; /* Ueberschriften + Logo */
--font-body:"Inter","Helvetica Neue",Arial,sans-serif; /* Fliesstext */
}
/* ---------- Grundgeruest ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:18px;
line-height:1.6;
-webkit-text-size-adjust:100%;
}
a{color:var(--gold-soft);text-decoration:none;}
a:hover{text-decoration:underline;}
/* ---------- Panorama ---------- */
.panorama{width:100%;display:block;}
.panorama img{width:100%;height:auto;display:block;}
/* ---------- Kopfleiste ---------- */
.topbar{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
gap:16px;
padding:14px 20px;
background:rgba(20,20,20,.96);
border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.brand{
font-family:var(--font-head);font-weight:600;
font-size:34px;line-height:1;color:var(--text);
letter-spacing:.4px;
}
.brand span{color:var(--gold);}
.menu-toggle{
display:none;
background:transparent;border:1px solid var(--line);
color:var(--text);border-radius:8px;
padding:8px 12px;font-size:20px;cursor:pointer;line-height:1;
}
/* ---------- Navigation ---------- */
nav{background:var(--bg-soft);border-bottom:1px solid var(--line);}
.nav-inner{
max-width:1100px;margin:0 auto;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:4px 6px;padding:8px 16px;
}
.nav-inner > a,
.dropdown > .drop-label{
display:inline-block;
padding:9px 14px;border-radius:8px;
color:var(--text);font-size:16px;cursor:pointer;
white-space:nowrap;
}
.nav-inner > a:hover,
.dropdown > .drop-label:hover{background:#333230;text-decoration:none;color:var(--gold-soft);}
.nav-inner a.lang{color:var(--gold-soft);}
/* Aufklappmenue (z. B. Ensemble) */
.dropdown{position:relative;}
.drop-label::after{content:" ▾";color:var(--muted);font-size:13px;}
.dropdown .drop-panel{
display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;
padding:8px;min-width:240px;box-shadow:0 12px 30px rgba(0,0,0,.5);
z-index:60;
}
.dropdown:hover .drop-panel,
.dropdown.open .drop-panel{display:block;}
.drop-panel a{
display:block;padding:8px 12px;border-radius:6px;color:var(--text);font-size:15px;
}
.drop-panel a:hover{background:#333230;color:var(--gold-soft);text-decoration:none;}
.drop-panel .drop-head{
color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px;
padding:6px 12px 4px;border-bottom:1px solid var(--line);margin-bottom:4px;
}
/* ---------- Hauptinhalt ---------- */
main{max-width:820px;margin:0 auto;padding:48px 24px 60px;}
.welcome{text-align:center;}
.welcome h1{
font-family:var(--font-head);
font-weight:600;font-size:37px;line-height:1.2;margin:0 0 22px;
color:var(--text);
}
.welcome p{margin:0 0 18px;color:var(--text);}
.welcome .lead{color:var(--muted);}
/* Konzert-Karte */
.concert{
margin:44px auto 0;max-width:640px;
background:var(--card);border:1px solid var(--line);
border-top:3px solid var(--gold);
border-radius:14px;padding:28px 26px;text-align:center;
}
.concert .kicker{
text-transform:uppercase;letter-spacing:2px;font-size:13px;
color:var(--gold);margin:0 0 10px;
}
.concert h2{
font-family:var(--font-head);
font-size:28px;font-weight:600;margin:0 0 8px;color:var(--text);
}
.concert .meta{color:var(--muted);font-size:16px;margin:0 0 20px;}
.btn{
display:inline-block;padding:11px 22px;border-radius:999px;
background:var(--gold);color:#191919;font-weight:600;font-size:15px;
letter-spacing:.3px;
}
.btn:hover{background:var(--gold-soft);text-decoration:none;}
/* ---------- Fusszeile ---------- */
footer{
border-top:1px solid var(--line);color:var(--muted);
text-align:center;font-size:14px;padding:28px 20px 40px;
}
/* ---------- Handy / schmale Bildschirme ---------- */
@media (max-width:820px){
body{font-size:17px;}
.menu-toggle{display:inline-block;}
nav{display:none;}
nav.open{display:block;}
.nav-inner{flex-direction:column;align-items:stretch;padding:10px;}
.nav-inner > a,
.dropdown > .drop-label{
width:100%;text-align:left;padding:14px 12px;border-radius:8px;
border-bottom:1px solid var(--line);
}
.nav-inner > a:last-child{border-bottom:none;}
.dropdown{width:100%;}
.dropdown .drop-panel{
position:static;transform:none;display:none;
box-shadow:none;border:none;padding:4px 0 4px 10px;min-width:0;
border-left:2px solid var(--line);margin:4px 0 4px 6px;
}
.dropdown.open .drop-panel{display:block;}
.welcome h1{font-size:30px;}
.brand{font-size:30px;}
main{padding:34px 20px 48px;}
.concert{padding:24px 20px;}
}
/* ============================================================
Ergaenzung 2026-07-21: Marke als Link + Textseiten-Baustein
(Kontakt, Datenschutz, Impressum u. ae.). Keine bestehenden
Tokens/Farben geaendert – nur neue Klassen + Feinschliff.
============================================================ */
/* Logo/Marke ist jetzt ein -> Link-Standardfarbe/Unterstrich neutralisieren */
a.brand,a.brand:hover{color:var(--text);text-decoration:none;}
a.brand span{color:var(--gold);}
/* aktiver Menuepunkt (aria-current) dezent hervorheben */
.nav-inner > a[aria-current="page"]{color:var(--gold-soft);background:#333230;}
/* ---------- Textseiten ---------- */
.textpage{max-width:760px;margin:0 auto;}
.textpage h1{
font-family:var(--font-head);font-weight:600;
font-size:37px;line-height:1.2;margin:0 0 8px;text-align:center;color:var(--text);
}
.textpage .subtitle{
text-align:center;color:var(--muted);font-size:17px;margin:0 0 36px;
}
/* Lauftext-Block */
.prose{color:var(--text);}
.prose h2{
font-family:var(--font-head);font-weight:600;
font-size:26px;line-height:1.3;margin:38px 0 10px;color:var(--text);
padding-bottom:6px;border-bottom:1px solid var(--line);
}
.prose h3{
font-family:var(--font-body);font-weight:500;
font-size:18px;margin:26px 0 6px;color:var(--gold-soft);
}
.prose p{margin:0 0 16px;}
.prose ul{margin:0 0 16px;padding-left:22px;}
.prose li{margin:5px 0;}
.prose a{color:var(--gold-soft);word-break:break-word;}
.prose .muted{color:var(--muted);}
.prose small{color:var(--muted);font-size:14px;}
/* ---------- Kontakt-Karte ---------- */
.contact-card{
background:var(--card);border:1px solid var(--line);
border-top:3px solid var(--gold);border-radius:14px;
padding:26px 28px;margin:0 auto 34px;max-width:640px;
}
.contact-card h2{
font-family:var(--font-head);font-weight:600;font-size:24px;
margin:0 0 16px;color:var(--text);border:none;padding:0;
}
.contact-card .row{margin:0 0 14px;}
.contact-card .row:last-child{margin-bottom:0;}
.contact-card .label{
display:block;color:var(--gold);font-size:12px;
text-transform:uppercase;letter-spacing:1.5px;margin-bottom:3px;
}
.contact-card .val{color:var(--text);}
.contact-card .val a{color:var(--gold-soft);}
/* Zurueck-/Weiter-Link unter Textseiten */
.page-nav{max-width:760px;margin:8px auto 0;text-align:center;}
.page-nav a{color:var(--gold-soft);font-size:15px;}
@media (max-width:820px){
.textpage h1{font-size:30px;}
.prose h2{font-size:23px;}
.contact-card{padding:22px 20px;}
}
/* ============================================================
Ergaenzung 2026-07-21: Bild-/Galerie-Baustein
(.figure Einzelbild + Bildunterschrift, .gallery Bildraster,
.media-text Bild neben Text). Nur neue Klassen, keine
bestehenden Tokens/Farben geaendert.
============================================================ */
/* Einzelbild mit optionaler Bildunterschrift */
.figure{margin:0 0 22px;}
.figure img{
width:100%;height:auto;display:block;
border:1px solid var(--line);border-radius:10px;background:var(--card);
}
.figure figcaption{
color:var(--muted);font-size:14px;line-height:1.5;
margin-top:8px;text-align:center;
}
/* Raster mehrerer Bilder; am Handy einspaltig */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:18px;margin:0 0 26px;
}
.gallery .figure{margin:0;}
/* Bild neben Text; am Handy gestapelt */
.media-text{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:26px;align-items:start;margin:0 0 26px;
}
.media-text .figure{margin:0;}
@media (max-width:820px){
.gallery{grid-template-columns:1fr;}
.media-text{grid-template-columns:1fr;}
}
/* ============================================================
Ergaenzung 2026-07-22: Personen-Baustein (.person)
Portraetfoto schmaler (~40%) neben Bio-Text; am Handy gestapelt.
Baut auf .figure/.prose auf. Keine bestehenden Tokens geaendert.
============================================================ */
.person{
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,3fr);
gap:28px;align-items:start;margin:0 0 26px;
}
.person .figure{margin:0;}
.person .prose{margin:0;}
@media (max-width:820px){
.person{grid-template-columns:1fr;}
}
/* ============================================================
Ergaenzung 2026-07-22: Audio-Baustein (.audio-list)
Track-Karten mit nativem HTML5-Player fuer Medienseiten
(Hoerproben, Samples). Nur neue Klassen, keine bestehenden
Tokens geaendert. Baut optisch auf .card/.figure-Sprache auf.
============================================================ */
.audio-list{list-style:none;margin:0 0 22px;padding:0;}
.audio-list li{
background:var(--card);
border:1px solid var(--line);
border-radius:10px;
padding:14px 16px;
margin:0 0 12px;
}
.audio-list .track-title{
display:block;
font-family:var(--font-body);
font-size:16px;
color:var(--text);
margin:0 0 9px;
line-height:1.4;
}
.audio-list .track-title .track-src{
display:block;
font-size:13px;
color:var(--muted);
margin-top:2px;
}
.audio-list audio{
width:100%;
height:38px;
display:block;
}
.audio-note{color:var(--muted);font-size:14px;margin:0 0 18px;}
@media (max-width:820px){
.audio-list li{padding:12px 13px;}
}
/* Responsiver Video-Rahmen (YouTube-Embed auf Medienseiten), 16:9 */
.video-embed{
position:relative;
width:100%;
aspect-ratio:16/9;
margin:0 0 8px;
border-radius:10px;
overflow:hidden;
border:1px solid var(--line);
}
.video-embed iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}