@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600");

/* ==========================================================
   Pianowerkstatt Transport – Slim CSS (HTML5 UP: Dimension)
   Beinhaltet: Reset, Basic/Type, Images, Header/Nav/Logo,
   BG, Wrapper, Main/Article, Footer, Icons/Social, Form-Basics,
   Buttons (inkl. .primary), Logo-Animation (PNG im Kreis)
   ========================================================== */

/* Reset / Normalize (gekürzt) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
table { border-collapse: collapse; border-spacing: 0; }
body { -webkit-text-size-adjust: none; line-height: 1; }

/* Basic */
@media screen and (max-width: 480px) { html, body { min-width: 320px; } }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { background: #1b1f22; }
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
  animation: none !important; transition: none !important;
}

/* Type */
html { font-size: 16pt; }
@media screen and (max-width:1680px){ html { font-size:12pt; }}
@media screen and (max-width:736px){ html { font-size:11pt; }}
@media screen and (max-width:360px){ html { font-size:10pt; }}
body, input, select, textarea {
  color: #ffffff; font-family: "Source Sans Pro", sans-serif;
  font-weight: 300; font-size: 1rem; line-height: 1.65;
}
a { transition: color .2s ease, background-color .2s ease, border-bottom-color .2s ease;
  border-bottom: dotted 1px rgba(255,255,255,.5); text-decoration: none; color: inherit; }
a:hover { border-bottom-color: transparent; }
strong, b { color:#fff; font-weight:600; }
em, i { font-style: italic; }
p { margin: 0 0 2rem 0; }

h1, h2, h3, h4, h5, h6 { color:#fff; font-weight:600; line-height:1.5;
  margin:0 0 1rem 0; text-transform:uppercase; letter-spacing:.2rem; }
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { color:inherit; text-decoration:none; }
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major{
  border-bottom:1px solid #fff; width:max-content; padding-bottom:.5rem; margin:0 0 2rem 0;
}
h1 { font-size:2.25rem; line-height:1.3; letter-spacing:.5rem; }
h2 { font-size:1.5rem; line-height:1.4; letter-spacing:.5rem; }
h3 { font-size:1rem; }
@media screen and (max-width:736px){ h1{font-size:1.75rem; line-height:1.4;} h2{font-size:1.25rem; line-height:1.5;} }

/* Lists (Minimal) */
ul { list-style: disc; margin: 0 0 2rem 0; padding-left:1em; }
ul li { padding-left: .5em; }
ol { list-style: decimal; margin:0 0 2rem 0; padding-left:1.25em; }
ol li { padding-left: .25em; }
/* Fix: lose <li> in Artikeln */
article li { list-style: disc; margin-left: 1.25rem; margin-bottom: .4rem; }

/* Icon helper (für Font Awesome Markup) */
.icon { text-decoration: none; border-bottom: none; position: relative; }
.icon:before { display:inline-block; line-height: inherit; text-rendering:auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-family: 'Font Awesome 5 Free'; font-weight:400; }
.icon.solid:before { font-weight:900; }
.icon.brands:before { font-family:'Font Awesome 5 Brands'; }
.icon > .label { display:none; }

/* Images */
.image { border-radius:4px; border:0; display:inline-block; position:relative; }
.image:before { pointer-events:none; background-image:url("../../images/overlay.png");
  background-color: rgba(19,21,25,.5); border-radius:4px; content:''; display:block;
  height:100%; left:0; opacity:.5; position:absolute; top:0; width:100%; }
.image img { border-radius:4px; display:block; }
.image.fit, .image.main { display:block; width:100%; margin:2.5rem 0; }
.image.fit img, .image.main img { width:100%; }
@media screen and (max-width:736px){ .image.main{ margin:2rem 0; } }
@media screen and (max-width:480px){ .image.main{ margin:1.5rem 0; } }

/* Actions (für Formular-Buttons Zeile) */
ul.actions { display:flex; cursor:default; list-style:none; margin-left:-1rem; padding-left:0; }
ul.actions li { padding:0 0 0 1rem; vertical-align:middle; }
@media screen and (max-width:480px){
  ul.actions:not(.fixed){ flex-direction:column; margin-left:0; width:100%!important; }
  ul.actions:not(.fixed) li { flex-grow:1; padding:1rem 0 0 0; text-align:center; width:100%; }
  ul.actions:not(.fixed) li:first-child { padding-top:0; }
}

/* Social Icons Kreis-Buttons */
ul.icons { cursor:default; list-style:none; padding-left:0; }
ul.icons li { display:inline-block; padding:0 .75em 0 0; }
ul.icons li:last-child { padding-right:0; }
ul.icons li a { border-radius:100%; box-shadow: inset 0 0 0 1px #fff; display:inline-block;
  height:2.25rem; width:2.25rem; line-height:2.25rem; text-align:center; }
ul.icons li a:hover { background-color: rgba(255,255,255,.075); }
ul.icons li a:active { background-color: rgba(255,255,255,.175); }

/* Buttons */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
  appearance:none; transition: background-color .2s ease, color .2s ease;
  background-color: transparent; border-radius:4px; border:0; box-shadow: inset 0 0 0 1px #fff;
  color:#fff!important; cursor:pointer; display:inline-block; font-size:.8rem; font-weight:300;
  height:2.75rem; letter-spacing:.2rem; line-height:2.75rem; padding:0 1.25rem 0 1.35rem;
  text-transform:uppercase; white-space:nowrap; text-decoration:none;
}
input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary{
  background-color:#fff; color:#1b1f22!important; font-weight:600;
}
input[type="submit"], input[type="reset"], input[type="button"], button { line-height: calc(2.75rem - 2px); }

/* BG (Hintergrundbild/Overlay + Blur, wenn Artikel offen) */
#bg { transform: scale(1.0); -webkit-backface-visibility: hidden; position: fixed; top:0; left:0;
  width:100%; height:100vh; z-index:1; }
#bg:before, #bg:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
#bg:before { transition: background-color 2.5s ease-in-out .75s; background-image: linear-gradient(to top, rgba(19,21,25,.5), rgba(19,21,25,.5)), url("../../images/overlay.png"); background-size:auto,256px 256px; background-position:center,center; background-repeat:no-repeat,repeat; z-index:2; }
#bg:after { transform: scale(1.125); transition: transform .325s ease-in-out, filter .325s ease-in-out;
  background-image:url("../../images/bg.jpg"); background-position:center; background-size:cover; background-repeat:no-repeat; z-index:1; }
body.is-article-visible #bg:after { transform: scale(1.0825); filter: blur(.2rem); }
body.is-preload #bg:before { background-color:#000; }

/* Wrapper */
#wrapper { display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  position:relative; min-height:100vh; width:100%; padding:4rem 2rem; z-index:3; }
@media screen and (max-width:1680px){ #wrapper{ padding:3rem 2rem; } }
@media screen and (max-width:736px){ #wrapper{ padding:2rem 1rem; } }
@media screen and (max-width:480px){ #wrapper{ padding:1rem; } }

/* Header */
#header { display:flex; flex-direction:column; align-items:center; text-align:center;
  transition: transform .325s ease-in-out, filter .325s ease-in-out, opacity .325s ease-in-out;
  background-image: radial-gradient(rgba(0,0,0,.25) 25%, rgba(0,0,0,0) 55%);
  max-width:100%; }
#header > * { transition: opacity .325s ease-in-out; position:relative; margin-top:3.5rem; }
#header > *:before { content:''; display:block; position:absolute; top: calc(-3.5rem - 1px); left: calc(50% - 1px);
  width:1px; height: calc(3.5rem + 1px); background:#fff; }
#header > :first-child { margin-top:0; }
#header > :first-child:before { display:none; }
#header .logo { width:5.5rem; height:5.5rem; line-height:5.5rem; border:1px solid #fff; border-radius:100%; }
#header .content { border-style:solid; border-color:#fff; border-top-width:1px; border-bottom-width:1px; max-width:100%; }
#header .content .inner { transition: max-height .75s ease, padding .75s ease, opacity .325s ease-in-out .25s;
  padding:3rem 2rem; max-height:40rem; overflow:hidden; }
#header .content .inner > :last-child { margin-bottom:0; }
#header .content p { text-transform:uppercase; letter-spacing:.2rem; font-size:.8rem; line-height:2; }
#header nav ul { display:flex; margin-bottom:0; padding-left:0; list-style:none; border:1px solid #fff; border-radius:4px; }
#header nav ul li { padding-left:0; border-left:1px solid #fff; }
#header nav ul li:first-child { border-left:0; }
#header nav ul li a { display:block; min-width:7.5rem; height:2.75rem; line-height:2.75rem; padding:0 1.25rem 0 1.45rem;
  text-transform:uppercase; letter-spacing:.2rem; font-size:.8rem; border-bottom:0; }
#header nav ul li a:hover { background-color: rgba(255,255,255,.075); }
#header nav ul li a:active { background-color: rgba(255,255,255,.175); }
@media screen and (max-width:980px){ #header .content p br { display:none; } }
@media screen and (max-width:736px){
  #header > * { margin-top:2rem; }
  #header > *:before { top: calc(-2rem - 1px); height: calc(2rem + 1px); }
  #header .logo { width:4.75rem; height:4.75rem; line-height:4.75rem; }
  #header .content .inner { padding:2.5rem 1rem; }
}
@media screen and (max-width:480px){
  #header { padding:1.5rem 0; }
  #header .content .inner { padding:2.5rem 0; }
  #header nav ul { flex-direction:column; min-width:10rem; max-width:100%; }
  #header nav ul li { border-left:0; border-top:1px solid #fff; }
  #header nav ul li:first-child { border-top:0; }
  #header nav ul li a { height:3rem; line-height:3rem; min-width:0; width:100%; }
}

/* Main */
#main { flex-grow:1; flex-shrink:1; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; max-width:100%; z-index:3; }
#main article { transform: translateY(.25rem); transition: opacity .325s ease-in-out, transform .325s ease-in-out;
  padding:4.5rem 2.5rem 1.5rem 2.5rem; position:relative; width:40rem; max-width:100%;
  background-color: rgba(27,31,34,.85); border-radius:4px; opacity:0; }
#main article.active { transform: translateY(0); opacity:1; }
#main article .close { display:block; position:absolute; top:0; right:0; width:4rem; height:4rem; cursor:pointer; text-indent:4rem; overflow:hidden; white-space:nowrap; }
#main article .close:before { transition: background-color .2s ease-in-out; content:''; display:block; position:absolute; top:.75rem; left:.75rem; width:2.5rem; height:2.5rem; border-radius:100%; background-position:center; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cstyle%3Eline%7Bstroke:%23ffffff;stroke-width:1%7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18'/%3E%3Cline x1='18' y1='2' x2='2' y2='18'/%3E%3C/svg%3E"); background-size:20px 20px; background-repeat:no-repeat; }
#main article .close:hover:before { background-color: rgba(255,255,255,.075); }
#main article .close:active:before { background-color: rgba(255,255,255,.175); }
@media screen and (max-width:736px){
  #main article { padding:3.5rem 2rem .5rem 2rem; }
  #main article .close:before { top:.875rem; left:.875rem; width:2.25rem; height:2.25rem; background-size:14px 14px; }
}
@media screen and (max-width:480px){ #main article { padding:3rem 1.5rem .5rem 1.5rem; } }

/* Footer */
#footer { transition: transform .325s ease-in-out, filter .325s ease-in-out, opacity .325s ease-in-out;
  width:100%; max-width:100%; margin-top:2rem; text-align:center; }
#footer .copyright { letter-spacing:.2rem; font-size:.6rem; opacity:.75; margin-bottom:0; text-transform:uppercase; }

/* View States */
body.is-article-visible #header, body.is-article-visible #footer { transform: scale(.95); filter: blur(.1rem); opacity:0; }
body.is-preload #header { filter: blur(.125rem); }
body.is-preload #header > * { opacity:0; }
body.is-preload #header .content .inner { max-height:0; padding-top:0; padding-bottom:0; opacity:0; }

/* Form – Basisteile, die du nutzt */
form { margin:0 0 2rem 0; }
form > :last-child { margin-bottom:0; }
form > .fields { display:flex; flex-wrap:wrap; width:calc(100% + 3rem); margin:-1.5rem 0 2rem -1.5rem; }
form > .fields > .field { flex-grow:0; flex-shrink:0; padding:1.5rem 0 0 1.5rem; width:calc(100% - 1.5rem); }
form > .fields > .field.half { width: calc(50% - 0.75rem); }
@media screen and (max-width:480px){
  form > .fields { width:calc(100% + 3rem); margin:-1.5rem 0 2rem -1.5rem; }
  form > .fields > .field, form > .fields > .field.half { width: calc(100% - 1.5rem); }
}
label { color:#fff; display:block; font-size:.8rem; font-weight:300; letter-spacing:.2rem; line-height:1.5; margin:0 0 1rem 0; text-transform:uppercase; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  background-color: transparent; border-radius:4px; border:1px solid #fff; color:inherit;
  display:block; outline:0; padding:0 1rem; width:100%; }
input[type="text"], input[type="email"], input[type="tel"] { height: 2.75rem; }
textarea { padding:.75rem 1rem; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
  background: rgba(255,255,255,.075); border-color:#fff; box-shadow: 0 0 0 1px #fff; }

/* ===== PNG-Logo im Kreis (95%) + sanftes Fade-in ===== */
#header .logo { /* Basis-Kreis bleibt bestehen – Flex-Zentrierung & Fade-in */
  display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent;
  animation: logoFadeIn 2s ease-out .5s both; }
#header .logo img { width:100%; height:auto; border-radius:50%; display:block; opacity:0; transform:scale(.95);
  animation: logoFadeInImg 1.5s ease-out .5s forwards; }
@keyframes logoFadeIn { 0%{opacity:0; transform:scale(.9);} 100%{opacity:1; transform:scale(1);} }
@keyframes logoFadeInImg { 0%{opacity:0; transform:scale(.9);} 100%{opacity:1; transform:scale(.95);} }

/* =========================
   Cookie-Hinweis (Vollbreit, dezent, mobiloptimiert)
   ========================= */
#cookieNotice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75);
  color: #f3f4f6;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: none;
  text-align: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.6s ease forwards;
}

#cookieNotice a {
  color: inherit;
  text-decoration: none;
}

#cookieNotice a:hover {
  text-decoration: underline;
}

#cookieNotice button {
  margin-top: 0.8rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #f3f4f6;
  font-weight: 600;
  padding: 0.5rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
}

#cookieNotice button:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile Anpassung */
@media screen and (max-width: 480px) {
  #cookieNotice {
    font-size: 0.85rem;
    padding: 1rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  #cookieNotice button {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
  }
}

/* Form: Fehlermarkierung */
.field.error input,
.field.error textarea,
.field.error select {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,.15);
}
.field .hint-error {
  color: #ef4444;
  font-size: 0.9em;
  margin-top: .4rem;
}