/* 1. VARIABLEN & BASICS */
:root {
  --color-dark: #58585a;      /* OAG Anthrazit */
  --color-primary: #0071bc;   /* OAG Hauptblau */
  --color-accent: #b9d1e8;    /* OAG Hellblau */
  --font-main: 'Inter', sans-serif;
  --steel-weld: #3d454d; 
  --glow-hot: #ff4500;
  --glow-light: #ffba00;
  --bg-alt: #f4f4f4;          /* Subtiler Hintergrund für Metall-Elemente */
}

body {
  font-family: var(--font-main);
  background-color: #fcfcfc;
  color: #333;
  margin: 0;
}

/* Anpassung für Contao Überschriften in Artikeln */
#main h1, #main h2, #main h3 {
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Buttons (z.B. für Downloads oder Links in Contao) */
.btn-primary, .btn, .ce_text a.button, .ce_form button {
  display: inline-block;
  background: var(--color-primary);
  color: white !important;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  border: none;
}

/* 3. METALL-ELEMENTE (Inhaltselemente oder Artikel) */

/* Container: In Contao oft ein Artikel (.mod_article) */
.metall-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

/* Das Basis-Bauteil: Wir nutzen eine CSS-Klasse, 
   die du im Contao-Backend vergeben kannst */
.metall-element {
  color: var(--steel-weld);
  min-height: 200px;
  padding: 20px;
  background-color: var(--bg-alt);
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.5),
    inset -2px -2px 5px rgba(0, 0, 0, 0.05),
    8px 12px 25px rgba(0, 0, 0, 0.1);
    border: 4px solid transparent;
}

.metall-stahl {
  color: var(--steel-weld);
  min-height: 200px;
  padding: 20px;
  background-color: var(--bg-alt);
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.5),
    inset -2px -2px 5px rgba(0, 0, 0, 0.05),
    8px 12px 25px rgba(0, 0, 0, 0.1);

  border: 4px solid transparent;
}




/* TYP A: Punktgeschweißt */
.naht-punkt {
  border-radius: 40px;
  border-image-source: radial-gradient(circle, currentColor 70%, transparent 90%);
  border-image-slice: 10;
  border-image-repeat: round;
  border-image-width: 8px;
}

/* TYP B: Durchlaufende Naht */
.naht-raupe {
  border-radius: 10px;
  border: 10px solid transparent;
  border-image-source: repeating-linear-gradient(20deg, currentColor, currentColor 2px, transparent 2px, transparent 10px);
  border-image-slice: 10;
}

/* TYP C: Ecken-Schweißung */
.naht-ecke {
  border-image-source: repeating-conic-gradient(from 0deg at 50% 50%, currentColor 0 15deg, transparent 15deg 30deg);
  border-image-slice: 70;
  border-image-repeat: space;
}

/* --- HOVER-EFFEKTE --- */
.mmetall-element:hover {
  color: var(--glow-hot);
  filter: drop-shadow(0 0 4px var(--glow-hot)) drop-shadow(0 0 8px var(--glow-light));
  transform: scale(1.02);
}

.naht-raupe:hoverr {
  border-image-source: repeating-linear-gradient(90deg, var(--glow-hot), var(--glow-light) 4px, var(--glow-hot) 8px);
}

.naht-punkt:hover {
  border-image-source: radial-gradient(circle, var(--glow-light) 30%, var(--glow-hot) 60%, transparent 80%);
}


/* Der Hauptcontainer der Galerie */
.prefooter2{
   
    background-image: radial-gradient(rgba(30, 0, 0, 0.2) 3%, transparent 16%);
    background-size: 5px 5px;
    background-attachment: fixed;
    box-shadow: inset 0 20px 30px -10px rgba(0,0,0,0.3);
}




/* Millimeter background animiert oben */


.skala-oben {
    background-image: url("../src/img/mm_line.png");
    background-repeat: repeat-x;
    background-size: auto 5%;
    width: 100%; /* Wichtig, damit sie über die volle Breite geht */
    
    
    /* Hier wird die Animation zugewiesen 
    animation: move-rule 50s linear infinite;*/
}

/* 2. Die Definition der Animation (nur einmal nötig) */
@keyframes move-rule {
    from { 
        background-position: 0 0; 
    }
    to { 
        background-position: -1000px 0; /* Wert sollte der Breite deines Bildes entsprechen */
    }
}



/* Millimeter background animiert unten */


.skala
 {
    /* Pfad bleibt wie besprochen */
    background-image: url("../src/img/mm_line_1.png");
    background-repeat: repeat-x;
    
    /* POSITIONIERUNG UNTEN: */
       0 = links, 100% (oder 'bottom') = unten 
    background-position: bottom; 
    
   
    width: 100%;
    
    /* Schatten nach innen, wirkt eher wie eine Kante 
    box-shadow: inset 0 -10px 20px -5px rgba(0,0,0,0.50);*/
    
    background-size: auto 30px;
    animation: move-rule 200s linear infinite;
}

@keyframes move-rule {
    from { 
        /* Wir müssen 'bottom' (100%) beibehalten, während wir X verschieben */
        background-position: 0 100%; 
    }
    to { 
        background-position: -1000px 100%; 
    }
}