/* =========================================================
   09052026 - 08-50
   TUNING WORLD BODENSEE 2026 – MEDIENRUNDGANG
   KOMMENTIERTE CSS-DATEI ZUM SELBST ANPASSEN
   Version: medienrundgang-V3.4-version-unter-footerphoto

   WICHTIGER ÜBERBLICK
   ---------------------------------------------------------
   Diese Datei steuert fast alle Positionen, Größen, Farben
   und Abstände des Posters.

   HEADER-BEREICHE, DIE DU WAHRSCHEINLICH ÄNDERN WILLST:

   1) TWB-Logo links oben:
      Suche nach: .top-brand img
      Wichtige Werte:
      - width / height  = Logo-Größe
      - opacity         = Transparenz
      - top/left stehen bei .top-brand

   2) tuningfotojournal-Schrift oben:
      Suche nach: .tfj-curve und .tfj-text
      Wichtige Werte:
      - width / height  = Platz der gebogenen Schrift
      - margin-top      = höher/tiefer innerhalb der Logo-Zeile
      - font-size       = Schriftgröße
      - letter-spacing  = Buchstabenabstand
      - fill            = Transparenz/Farbe

   3) Biegung der tuningfotojournal-Schrift:
      Die eigentliche Biegung liegt im HTML im SVG-Pfad:
      <path id="tfj-arc" d="M 20 105 Q 360 8 700 105"></path>
      Du findest im HTML einen Kommentar direkt an dieser Stelle.
      CSS kann Größe/Position steuern, der Kurvenverlauf selbst
      wird über diesen SVG-Pfad geändert.

   4) Roter Bericht-Kasten:
      Suche nach: .report-badge
      Wichtige Werte:
      - top             = weiter runter/höher
      - right           = weiter links/rechts
      - font-size       = Schriftgröße
      - padding         = Innenabstand / Kasten-Größe
      - transform       = Drehung
      - background      = Transparenz/Farbe

   5) Haupttitel „Tuning World Bodensee 2026“:
      Suche nach: .hero-title und .hero-title h1
      Wichtige Werte:
      - bottom          = weiter hoch/runter vom unteren Header-Rand
      - left/right      = seitliche Position
      - font-size       = Schriftgröße
      - letter-spacing  = enger/weiter

   6) Roter Balken „Highlights ...“:
      Suche nach: .hero-sub
      Wichtige Werte:
      - bottom          = Höhe im Header
      - left            = Abstand links
      - font-size       = Schriftgröße
      - padding         = Balkengröße
      - transform       = Schrägstellung

   Keine Unterordner nötig. Alle Dateien liegen flach im Ordner.
   Kein !important wird verwendet.
========================================================= */

@page{
    /* Druckformat: A4 Hochformat ohne Rand */
    size:A4 portrait;
    margin:0;
}

*{
    /* Macht Breiten leichter berechenbar: padding und border zählen zur Breite */
    box-sizing:border-box;
}

body{
    /* Außenfläche im Browser um das Poster herum */
    margin:0;
    background:#111;
    color:#111;
    font-family:Arial, Helvetica, sans-serif;
}

a{
    /* Bildlinks behalten normale Textfarbe und keine Unterstreichung */
    color:inherit;
    text-decoration:none;
}

.poster{
    /* Gesamtfläche des Posters: A4 */
    width:210mm;
    height:297mm;
    margin:0 auto;
    background:#fff;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 45px rgba(0,0,0,.45);
}

/* =========================================================
   HEADER / OBERES BILD
========================================================= */

.hero{
    /* Header enthält Bild, Logo, gebogene Schrift, Titel und Badge */
    height:82mm;
    position:relative;
    overflow:hidden;
    background:#000;
}

.hero-img{
    /* Headerfoto. Breite 100%, Höhe kommt vom Bildverhältnis */
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#000;
    filter:contrast(1.05) saturate(1.06);
}

.hero-dark{
    /* Dunkle Überlagerung auf dem Headerbild für bessere Lesbarkeit */
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.36) 35%,
            rgba(0,0,0,.10) 60%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0,.50),
            rgba(0,0,0,.04),
            rgba(0,0,0,.32)
        );
    pointer-events:none;
}

/* ---------------------------------------------------------
   LOGO + tuningfotojournal oben
   Das ist der komplette Block links/oben im Header.
--------------------------------------------------------- */
.top-brand{
    position:absolute;

    /* Abstand vom linken Rand des Posters/Headerbildes */
    left:3mm;

    /* Abstand vom oberen Rand. Kleiner = weiter nach oben. Größer = weiter runter. */
    top:2mm;

    z-index:3;
    display:flex;
    align-items:flex-start;

    /* Abstand zwischen TWB-Logo und tuningfotojournal-Schrift */
    gap:3mm;
}

.top-brand img{
    /* TWB-Logo links oben: Größe */
    width:24mm;
    height:24mm;

    /* Bild wird sauber in das Quadrat eingepasst */
    object-fit:cover;

    /* Abgerundete Ecken */
    border-radius:3mm;

    background:#000;

    /* Transparenz Logo: 1 = voll sichtbar, .46 = deutlich transparent */
    opacity:.46;

    box-shadow:0 4px 18px rgba(0,0,0,.36);
}

.tfj-curve{
    /* SVG-Fläche für die gebogene tuningfotojournal-Schrift */

    /* Breite der gesamten Schriftfläche. Größer = Schrift kann weiter laufen. */
    width:190mm;

    /* Höhe der SVG-Fläche. Größer = mehr Platz für Biegung nach oben/unten. */
    height:30mm;

    /* Feine vertikale Korrektur innerhalb des top-brand-Blocks.
       Negativ = höher, positiv = tiefer. */
    margin-top:-2mm;
    margin-left:-14mm;

    overflow:visible;

    /* Schatten der kompletten gebogenen Schrift */
    filter:drop-shadow(0 3px 12px rgba(0,0,0,.62));
}

.tfj-text{
    /* tuningfotojournal-Schrift im SVG */
    font-family:Arial, Helvetica, sans-serif;

    /* Schriftgröße der gebogenen Schrift */
    font-size:64px;

    font-weight:900;

    /* Buchstaben enger/weiter: negativer Wert = enger */
    letter-spacing:-4.5px;

    /* Farbe und Transparenz Weißanteil */
    fill:rgba(255,255,255,.78);
}

.tfj-text .red{
    /* Farbe und Transparenz vom Wortteil „foto“ */
    fill:rgba(227,6,19,.78);
}

/* ---------------------------------------------------------
   ROTER BERICHT-KASTEN RECHTS IM HEADER
--------------------------------------------------------- */
.report-badge{
    position:absolute;

    /* Abstand vom rechten Rand. Größer = weiter nach links. */
    right:7mm;

    /* Abstand vom oberen Rand. Größer = weiter nach unten. */
    top:19mm;

    z-index:4;

    /* Rot mit Transparenz: letzter Wert .46 steuert Deckkraft */
    background:rgba(227,6,19,.46);

    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);

    color:#fff;

    /* Schriftgröße im Badge */
    font-size:6mm;

    font-weight:900;
    line-height:1.05;

    /* Innenabstand: oben/unten 4mm, links/rechts 8mm */
    padding:4mm 8mm;

    /* Drehung. 0deg = gerade, 3deg = leicht schräg */
    transform:rotate(3deg);

    text-transform:uppercase;
    box-shadow:0 6px 20px rgba(0,0,0,.22);
}

.report-badge strong{
    /* Extra Größe für „13. MAI 2026“ */
    font-size:5.2mm;
}

/* ---------------------------------------------------------
   HAUPTTITEL IM HEADER
--------------------------------------------------------- */
.hero-title{
    position:absolute;

    /* Abstand links und rechts */
    left:6mm;
    right:6mm;

    /* Abstand vom unteren Rand des Headerbildes.
       Größer = weiter nach oben, kleiner = weiter nach unten. */
    bottom:17mm;

    z-index:3;
}

.hero-title h1{
    margin:0;

    /* Haupttitel-Farbe mit Transparenz */
    color:rgba(255,255,255,.84);

    /* Haupttitel-Schriftgröße */
    font-size:7.8mm;

    line-height:.92;

    /* Buchstabenabstand: negativer Wert macht die Schrift kompakter */
    letter-spacing:-.7mm;

    text-transform:uppercase;
    text-shadow:0 3px 10px rgba(0,0,0,.42);
}

/* ---------------------------------------------------------
   ROTER HIGHLIGHTS-BALKEN UNTER DEM HAUPTTITEL
--------------------------------------------------------- */
.hero-sub{
    position:absolute;

    /* Abstand vom linken Rand */
    left:6mm;

    /* Abstand vom unteren Rand des Headerbildes */
    bottom:3mm;

    z-index:4;
    background:rgba(227,6,19,.46);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    color:#fff;

    /* Schriftgröße im roten Balken */
    font-size:4.4mm;

    font-weight:900;
    text-transform:uppercase;

    /* Balken-Höhe und Breite durch Innenabstand */
    padding:2.5mm 6mm;

    letter-spacing:.4px;

    /* Schrägstellung. 0deg = gerade. */
    transform:skew(-6deg);

    box-shadow:0 4px 14px rgba(0,0,0,.22);
}

/* =========================================================
   BODY / INHALTSBEREICH
========================================================= */

.body-grid{
    /* 3 Spalten:
       1) linke schwarze Leiste 55mm
       2) Hauptinhalt nimmt den Rest
       3) schmaler schwarzer Abschluss rechts 8mm */
    display:grid;
    grid-template-columns:55mm 1fr 8mm;
    min-height:186mm;
}

.body-grid::after{
    /* Schmaler vertikaler schwarzer Abschluss rechts */
    content:"";
    grid-column:3;
    grid-row:1;
    display:block;
    background:#050505;
}

.content{
    /* Hauptinhalt in der mittleren Spalte */
    grid-column:2;
    grid-row:1;

    /* Innenabstand im Inhaltsbereich */
    padding:6mm 6mm 0 6mm;
}

.lead{
    /* Einleitungstext über den Karten */
    margin:0 0 5mm;
    font-size:4.3mm;
    line-height:1.34;
    font-weight:700;
}

.lead strong{
    color:#e30613;
}

.cards{
    /* Kartenraster: 3 Spalten */
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:3mm;
}

.card{
    border:1px solid #ddd;
    background:#fff;
    min-height:49mm;
}

.card img{
    /* Bild oben in jeder Karte */
    width:100%;
    height:24mm;
    object-fit:cover;
    display:block;
}

.txt{
    padding:2mm;
}

.card h2{
    margin:0 0 1.2mm;
    font-size:3.1mm;
    line-height:1;
    text-transform:uppercase;
}

.card h2 span{
    /* Roter Nummernblock 01, 02, 03 ... */
    display:inline-block;
    background:rgba(227,6,19,.88);
    color:#fff;
    font-size:4.6mm;
    line-height:1;
    font-weight:900;
    padding:1.2mm 1.6mm;
    margin-right:1mm;
}

.card p{
    margin:0;
    font-size:2.7mm;
    line-height:1.25;
}

.quote{
    background:#fff;
    min-height:49mm;
    border:1px solid #ddd;
    padding:3mm;
    position:relative;
}

.quote-mark{
    color:#e30613;
    font-size:16mm;
    line-height:.55;
    font-weight:900;
}

.quote p{
    margin:0;
    font-size:2.7mm;
    line-height:1.28;
    font-weight:700;
    font-style:italic;
}

.quote b{
    display:block;
    margin-top:3mm;
    color:#e30613;
    font-size:3mm;
    text-transform:uppercase;
}

.quote span{
    font-size:2.2mm;
}

/* =========================================================
   BREITES FOTO UNTEN IM INHALT
========================================================= */

.footer-photo{
    margin-top:5mm;
    height:56mm;
    position:relative;
    overflow:hidden;
    background:#111;
}

.footer-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.paint{
    /* Roter Textbalken auf dem unteren Foto */
    position:absolute;
    left:0;
    top:4mm;
    background:rgba(227,6,19,.52);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    color:#fff;
    font-size:6mm;
    font-weight:900;
    text-transform:uppercase;
    padding:2.2mm 7mm;
    transform:rotate(-2deg);
    box-shadow:0 4px 12px rgba(0,0,0,.28);
}

/* =========================================================
   LINKE SCHWARZE SEITENLEISTE
========================================================= */

.sidebar{
    /* Liegt links im Body-Grid */
    grid-column:1;
    grid-row:1;
    background:rgba(10,10,10,.96);
    color:#fff;

    /* Innenabstand der Leiste */
    padding:8mm 5mm 5mm;
}

.sidebar > h3{
    margin:0 0 8mm;
    font-size:5.1mm;
    line-height:1.05;
    text-transform:uppercase;
}

.fact{
    border-top:.35mm solid rgba(255,255,255,.28);
    padding:4mm 0;
}

.fact b{
    display:block;
    color:#e30613;
    font-size:8.7mm;
    line-height:.9;
    font-weight:900;
}

.fact span{
    display:block;
    font-size:3.4mm;
    line-height:1.05;
    text-transform:uppercase;
    font-weight:900;
}

.fact.small span{
    color:#fff;
    font-size:3.5mm;
}

.new{
    /* Weißer Kasten „Neu 2026“ in der linken Leiste */
    margin-top:3mm;
    background:rgba(255,255,255,.94);
    color:#111;
    padding:4mm;
}

.new h3{
    margin:0;
    color:#e30613;
    font-size:6mm;
    line-height:.95;
    text-transform:uppercase;
}

.new ul{
    margin:3mm 0;
    padding:0;
    list-style:none;
}

.new li{
    margin:1.8mm 0;
    font-size:3mm;
    font-weight:900;
    text-transform:uppercase;
}

.new li::before{
    content:"✓";
    color:#e30613;
    margin-right:1.5mm;
}

.new img{
    width:100%;
    height:28mm;
    object-fit:cover;
    display:block;
}



/* =========================================================
   QR-CODES DIREKT ÜBER DEM FOOTER.JPG
   ---------------------------------------------------------
   Die QR-Codes liegen als Overlay auf dem unteren Foto.

   Position ändern:
   - left / right / bottom bei .footer-qr-panel

   Größe ändern:
   - width / height bei .footer-qr-card img

   Hintergrund ändern:
   - background bei .footer-qr-panel

   Beide QR-Codes bleiben klickbar und öffnen die jeweilige Seite.
========================================================= */

.footer-qr-panel{
    position:absolute;

    /* Abstand innerhalb des footer.jpg */
    left:6mm;
    right:6mm;
    bottom:4mm;

    z-index:4;

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:6mm;

    padding:3mm 5mm;

    background:rgba(0,0,0,.58);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);

    border-top:.35mm solid rgba(255,255,255,.26);
    box-shadow:0 8px 24px rgba(0,0,0,.34);
}

.footer-qr-card{
    display:flex;
    align-items:center;
    gap:3mm;

    color:#fff;
    text-decoration:none;
}

.footer-qr-card img{
    width:24mm;
    height:24mm;
    display:block;

    padding:1.2mm;
    background:#fff;

    box-shadow:0 4px 14px rgba(0,0,0,.34);
}

.footer-qr-card span{
    display:block;

    max-width:32mm;

    color:#fff;
    font-size:3.2mm;
    line-height:1.05;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.15mm;

    text-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* =========================================================
   UNTERER SCHWARZER FOOTER
========================================================= */

.bottom{
    height:8mm;
    background:#050505;
    color:#fff;
    padding:2mm 6mm;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:2.7mm;
    font-weight:700;
}

.version-info{
    margin-top:2mm;
    height:5mm;
    background:#050505;
    color:#8b8b8b;
    text-align:center;
    font-size:2.25mm;
    line-height:5mm;
    letter-spacing:.25mm;
}



/* =========================================================
   DRUCK
========================================================= */

@media print{
    body{
        background:#fff;
    }

    .poster{
        margin:0;
        box-shadow:none;
    }
}

/* =========================================================
   FINALER HEADER-WUNSCH
   ---------------------------------------------------------
   - Links bleibt eine schwarze Fläche hinter dem TWB-Logo.
   - Unter dem Logo steht 2026.
   - Der Bericht-Kasten ist entfernt.
   - Das hochgeladene Header-PNG liegt über dem rechten Headerbild.
   - Die alte SVG-Schrift wird ausgeblendet, damit nur dein PNG wirkt.
========================================================= */

.hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:55mm;
    background:#050505;
    z-index:2;
}

.hero > a{
    display:block;
    height:100%;
}

.hero-img{
    width:calc(100% - 55mm);
    margin-left:55mm;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.hero-dark{
    left:55mm;
    width:calc(100% - 55mm);
}

/* Logo links sauber auf schwarzer Fläche */
.top-brand{
    left:4mm;
    top:4mm;
    z-index:6;
    display:flex;
    align-items:flex-start;
    gap:0;
}

.logo-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:47mm;
}

.logo-wrap img,
.top-brand .logo-wrap img{
    width:44mm;
    height:auto;
    opacity:1;
    border-radius:1.5mm;
    box-shadow:none;
}

.logo-year{
    margin-top:7.6mm;
    color:rgba(255,255,255,.92);
    font-size:14mm;
    line-height:1;
    font-weight:900;
    letter-spacing:1.4mm;
    text-transform:uppercase;
    text-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* Altes SVG ausblenden, weil das Header-PNG verwendet wird */
.tfj-curve{
    display:none;
}

/* Dein Header-PNG oben über dem rechten Headerbild */
.header-png-overlay{
    position:absolute;
    left:55mm;
    top:0;
    width:calc(100% - 55mm);
    height:auto;
    z-index:5;
    pointer-events:none;
}

/* Bericht-Kasten sicher ausblenden, falls im Cache/HTML noch vorhanden */
.report-badge{
    display:none;
}

/* Titel/Balken bleiben rechts, nicht über dem Logo */
.hero-title{
    left:61mm;
}

.hero-sub{
    left:61mm;

    max-width:136mm;

    font-size:3.8mm;

    line-height:1.08;

    padding:2.1mm 4.2mm;

    transform:skew(-4deg);
}


/* =========================================================
   TEXTWECHSEL ANIMATION
========================================================= */

.fade-text{
    transition:opacity .6s ease;
}

.fade-out{
    opacity:0;
}